canvas--绘制路径-三角形

100

101

102

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
<body>
    <!-- 绘制路径(path)多边形 -->
    <canvas id="tutorial" width="300" height="300"> 你的浏览器不支持canvas,请升级你的浏览器</canvas>
    <script>
        // 绘制线段
        function draw(){
            var canvas = document.getElementById('tutorial');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            ctx.beginPath(); //新建一条path
            ctx.moveTo(50, 50); //把画笔移动到指定的坐标
            ctx.lineTo(200, 50);  //绘制一条从当前位置到指定坐标(200, 50)的直线.
            //闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
            ctx.closePath();
            ctx.stroke(); //绘制路径。
        }
        draw();
 
        // 绘制三角形边框
        function drawTriangle(){
            var canvas = document.getElementById('tutorial');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(60, 60);
            ctx.lineTo(200, 60);
            ctx.lineTo(200, 200);
            ctx.closePath(); //虽然我们只绘制了两条线段，但是closePath会closePath，仍然是一个3角形
            ctx.stroke(); //描边。stroke不会自动closePath()
        }
        drawTriangle();
 
         
        // 填充三角形
        function tianchong(){
            var canvas = document.getElementById('tutorial');
            if (!canvas.getContext) return;
            var ctx = canvas.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(60, 100);
            ctx.lineTo(100, 100);
            ctx.lineTo(100, 200);
         
            ctx.fill(); //填充闭合区域。如果path没有闭合，则fill()会自动闭合路径。
        }
        tianchong();
 
 
 
        /* 笔记
         
        图形的基本元素是路径。
 
        ​ 路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
 
        ​ 一个路径，甚至一个子路径，都是闭合的。
 
        使用路径绘制图形需要一些额外的步骤：
 
        创建路径起始点
        调用绘制方法去绘制出路径
        把路径封闭
        一旦路径生成，通过描边或填充路径区域来渲染图形。
        下面是需要用到的方法：
 
        beginPath()
 
        新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
 
        moveTo(x, y)
 
        把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
 
        closePath()
 
        闭合路径之后，图形绘制命令又重新指向到上下文中
 
        stroke()
 
        通过线条来绘制图形轮廓
 
        fill()
 
        通过填充路径的内容区域生成实心的图形
         
         */
    </script>
     
</body>
</html>