canvas画布中的beginPath,closePath的用处
2017-04-18 21:36

canvas的beginPath

beginPath的意思是开始一条路径,不过对于刚接触canvas的前端人员,对于beginPath会感到迷惑,今天我们就通过代码例子来认识beginPath的用途。

我们使用canvas绘制两条直线,一个圆形,先不使用beginPath:

var cvs=document.getElementById("cvs");
var ctx=cvs.getContext("2d");
ctx.strokeWidth="3px";
ctx.strokeStyle="red";
ctx.moveTo(10,10);
ctx.lineTo(280,180);
ctx.strokeStyle="green";
ctx.moveTo(280,20);
ctx.lineTo(10,190);
ctx.strokeStyle="#B90CB3";
ctx.arc(150,100,50,0,360);
ctx.stroke();

这段代码没有使用beginPath,但从代码上,我们的意愿是画两条交叉的直线,然后在中心画一个圆形,而代码绘制的结果却是这样的:

blob.png

我们设置的是第一条线是红色,第二条线是绿色,圆形是紫色,但这些线段都变成紫色了,并且第二条线和圆形出现了一条连线。

这就是我们没有使用beginPath导致的。stroke方法是用来绘制我们定义的路径的,两条直线和一个圆形都是路径,同一个路径在stroke绘制的时候只会采用同一种颜色,而在绘制圆形的时候没有使用moveTo的方法,2d引擎就会认为圆形路径是从第二条直线的结束点开始绘制。所以出现了一条直线到圆形的连接线。要正确绘制这三个图形,我们需要使用beginPath方法在没一个图形路径绘制完后重新开始路径。

var cvs=document.getElementById("cvs");
var ctx=cvs.getContext("2d");
ctx.strokeWidth="3px";
ctx.strokeStyle="red";
ctx.moveTo(10,10);
ctx.lineTo(280,180);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle="green";
ctx.moveTo(280,20);
ctx.lineTo(10,190);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle="#B90CB3";
ctx.arc(150,100,50,0,360);
ctx.stroke();

代码做了如上修改后,每一个图形后面使用stroke,并且在第二个图形开始之前使用beginPath重新开始路径,这样再用stroke绘制路径的时候,这个图形就和上一个图形的路径没有关联关系了。他们就会是一个个的独立图形。修改后代码的绘制结果如下:

blob.png

代码中使用beginPath和不使用beginPath的效果很明显,beginPath的使用是开始一个路径,也就是为了切断和上一个图形的路径联系。而stroke是绘制一个路径,所以要在beginPath前使用stroke完成上一个图形的绘制,不然调用了beginPath后上一个图形的路径就已经被清除了,想要在结尾使用一个stroke完事,那最后的结果就是只绘制出了最后一个图形的路径。

不知对于stroke是这样,对于fill填充的图形也是一样要使用beiginPath,fill的作用是填充路径所代表的图形,也是以路径为框架的。fill填充图形中的beginPath的用法跟stroke绘制图形边框中的beginPath一样。

canvas的closePath

canvas的closePath是用来关闭一条路径,并且从终点向起点绘制一条连接线。

我们在画布上画两条相连的线,然后使用closePath来链接第二条线的结点和第一条线的起点组成一个三角形。

var cvs=document.getElementById("cvs");
var ctx=cvs.getContext("2d");
ctx.strokeWidth="3px";
ctx.strokeStyle="red";
ctx.moveTo(30,30);
ctx.lineTo(50,160);
ctx.lineTo(180,140);
ctx.closePath();
ctx.stroke();

这段代码使用closePath链接成的三角形的结果如下:

blob.png

当然,这段代码你完全可以使用lineTo再画一条直线,组成一个三角形,但是使用closePath来闭合路径组成三角形显然更方便,我们不用去找最后一条直线的起点和终点,就可以完成图形的闭合。

但是closePath并没有重新开始路径的作用,也不会清除上一个图形的路径。在上面的代码中,我们再画一个圆形:

var cvs=document.getElementById("cvs");
var ctx=cvs.getContext("2d");
ctx.strokeWidth="3px";
ctx.strokeStyle="red";
ctx.moveTo(30,30);
ctx.lineTo(50,160);
ctx.lineTo(180,140);
ctx.closePath();
ctx.stroke();
ctx.arc(50,50,20,0,360);
ctx.stroke();

发现结果如下:

blob.png

closePath只是闭合了三角形,但绘制的圆形和三角形还是在同一个路径中,会出现三角形和圆形之间的一条连接线。所以我们还得使用beginPath来清除上一个路径,开始新的路径来使图形独立起来。

var cvs=document.getElementById("cvs");
var ctx=cvs.getContext("2d");
ctx.strokeWidth="3px";
ctx.strokeStyle="red";
ctx.moveTo(30,30);
ctx.lineTo(50,160);
ctx.lineTo(180,140);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.arc(50,50,20,0,360);
ctx.stroke();

添加上beginPath后,绘制结果就如我们所预期的一样了:

blob.png

结语

上面介绍了beginPath和closePath的,相信你已经能明白他们的用途了,在canvas画布中绘制几何图形,最后都是使用stroke,fill来绘制边框或者填充,他们操作的都是路径,所以无论对于canvas API中的任何图形,你都应该使用beginPath来重新开始路径,进而切断路径的连续性来达到图形的独立性,绘制出我们所预期的结果。

原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(5915)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1