在绘制三角形的过程中。
因为使用beginPath()和closePath()会自动闭合,这使得我们会忽略一个问题。
当使用最原始的lineTo,一个点一个点连接,你会发现,最后一条线回到初始点的时候,产生了空缺。这是closePath()中不会产生的。
1.closePath()
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.lineTo(20,200);
// 填充颜色为蓝色
ctx.fillStyle = 'blue';
ctx.fill();
ctx.closePath();// 自动闭合
// 路径颜色为红色
ctx.strokeStyle ='red';
// 路径宽度为9
ctx.lineWidth = 10;
ctx.stroke();
效果
2.lineTo()
ctx.beginPath();
ctx.moveTo(100,100);
ctx.lineTo(200,200);
ctx.lineTo(20,200);
ctx.lineTo(100,100); // 与上面不同的地方
// 填充颜色为蓝色
ctx.fillStyle = 'blue';
ctx.fill();
// 路径颜色为红色
ctx.strokeStyle ='red';
// 路径宽度为9
ctx.lineWidth = 10;
ctx.stroke();
效果: