摘要：
Canvas：绘制路径 然后使用“绘制”命令绘制路径。然后关闭路径。函数解释beginPath（）：清除子路径列表并创建新路径。constcanvas=文档。按ID获取元素；constctx=画布。getContext；//第一路径x。beginPath（）；ctx。strokeStyle='蓝色'；ctx。移动到；ctx。lineTo；ctx。stroke（）；//第二路径x。beginPath（）；ctx。strokeStyle=“绿色”；ctx。移动到；ctx。lineTo；ctx。stroke（）；注意：如果我们删除ctx。在SecondPath部分中的beginPath（）；然后最后一行中的笔划将重新绘制所有两条路径，即第一条路径绘制两次，第二次的效果覆盖第一次。
绘制路径
图形的基本元素是路径。路径是[通过不同颜色和宽度的线段或曲线相连形成的不同形状的]点的集合。一个路径，甚至一个子路径，都是闭合的。
使用路径绘制图形需要一些额外的步骤。
- 首先，你需要创建路径起始点。
- 然后你使用画图命令去绘制路径。
- 之后把路径进行封闭。
- 一旦路径生成，你就能通过描边或填充路径区域来渲染图形。
函数解释
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()
【说明】：尝试从当前点添加直线到子路径的开始点，来闭合路径。
【实例】：绘制一个三角形
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> 效果
