Canvas：绘制路径

Canvas：绘制路径

绘制路径

　　图形的基本元素是路径。路径是[通过不同颜色和宽度的线段或曲线相连形成的不同形状的]点的集合。一个路径，甚至一个子路径，都是闭合的。

　　使用路径绘制图形需要一些额外的步骤。

1. 首先，你需要创建路径起始点。
2. 然后你使用画图命令去绘制路径。
3. 之后把路径进行封闭。
4. 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

函数解释

beginPath()

【说明】：清空子路径列表，并新建一条路径。

【例子】：绘制两条颜色不同的直线。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// First path
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(20, 20);
ctx.lineTo(200, 20);
ctx.stroke();

// Second path
ctx.beginPath();
ctx.strokeStyle = 'green';
ctx.moveTo(20, 20);
ctx.lineTo(120, 120);
ctx.stroke();

说明：如果我们在Second Path部分删掉 ctx.beginPath(); 那么最后一行的stroke将会重新绘制所有的两条路径，也就是说第一条路径被绘制了两次，且第二次的效果覆盖了第一次。

moveTo()/lineTo()

【说明】

　　moveTo:将一个新的子路径的起始点移动到(x，y)坐标的方法。

　　lineTo:使用直线连接子路径的终点到x，y坐标的方法（并不会真正地绘制）。

说明：这两个方法都不会真正绘制图形，相当于隐形墨水，来描述路径，我们知道stroke和fill方法才会真正描边或者填充图形。

closePath()

【说明】：尝试从当前点添加直线到子路径的开始点，来闭合路径。

【实例】：绘制一个三角形

扫描二维码关注公众号，回复： 4196608 查看本文章

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

ctx.beginPath();
ctx.moveTo(20, 150);   // Move pen to bottom-left corner
ctx.lineTo(120, 20);   // Line to top corner
ctx.lineTo(220, 150);  // Line to bottom-right corner
ctx.closePath();       // Line to bottom-left corner
ctx.stroke();

说明：我们只使用lineTo画了两条子路径，但是效果是一个三角形，这是因为最后的closePath()，绘制了一条指向开始点的直线。

实例：绘制一个网格

代码

    <canvas id="canvas"></canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');

        function drawGrid(context,color,stepx,stepy) {
            context.strokeStyle = color;
            context.lineWidth = 0.5;
            for(var i = stepx+0.5;i<context.canvas.width;i+=stepx)
            {
                context.beginPath();
                context.moveTo(i,0);
                context.lineTo(i,context.canvas.height);
                context.stroke();
            }
            for(var i = stepy+0.5;i<context.canvas.height;i+=stepy)
            {
                context.beginPath();
                context.moveTo(0,i);
                context.lineTo(context.canvas.width,i);
                context.stroke();
            }
        }

        drawGrid(context,"lightgray",10,10);
    </script>　　

效果