canvas绘制图形时beginPath应用
当我们在使用canvas绘制图形的时候，不免都会使用到beginPath这个方法。今天我们就来讲解一下这个函数的重要性以及应用。
首先我们来看两段代码：
var ctx = document.getElementById("myCanvas").getContext('2d');
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(200, 25);
ctx.lineWidth = 10;
ctx.strokeStyle = 'green';
ctx.stroke();
ctx.beginPath();
ctx.moveTo(25,50);
ctx.lineTo(200, 50)
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.stroke();这段代码非常简单：就是绘制两条线，一条为10px的绿线，一条为2px的红线
然后我们修改一点代码，在运行一次：
var ctx = document.getElementById("myCanvas").getContext('2d');
ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(200, 25);
ctx.lineWidth = 10;
ctx.strokeStyle = 'green';
ctx.stroke();
//ctx.beginPath();
ctx.moveTo(25,50);
ctx.lineTo(200, 50)
ctx.lineWidth = 2;
ctx.strokeStyle = 'red';
ctx.stroke();我们这里把第二个beginPath给注释掉了，然后我们在看一下效果如何：
看到这里，大家应该也明白了beginPath的用处了吧，我来简单说一下。
在canvas中的绘制方法中stroke，都会以最近一次的beginPath为绘制路径，当代码调用第一次stroke时，绘制了一条10px的绿线，当调用第二次stroke的时候，由于我把第二个beginPath注释掉了，所以他就会去找上一个beginPath作为绘制路径，所以调用第二次stroke时，就会绘制出两条2px的红线。
看到这里大家明白beginPath的作用了吗。
说到了beginPath，closePath也应该经常使用到吧，这两个并不是搭配使用。
closePath只是将路径起点和终点相连接，不会重新开始一个路径，所以想新建一个路径请使用beginPath。
closePath应用代码：
var i = 0;
var c1 = window.setInterval(myFunction, 1000);
var ctx = document.getElementById("myCanvas").getContext("2d");
function myFunction() {
i++;
console.log(i);
if (i == 1) {
ctx.moveTo(25, 25);
ctx.lineTo(150, 25);
}
if (i == 2) {
ctx.lineTo(25, 150);
}
if (i == 3) {
ctx.closePath();//将起点与终点连接，形成三角形
window.clearInterval(c1);
}
ctx.stroke();
}
</script>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019年09月28日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读