canvas的beginPath和closePath

beginPath和closePath从名字上看好像是开始路径和结束路径, 直觉上它们应该成对出现.

实际上并不是, beginPath开始一条路径.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");

// 第一段路径
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="red"; // 红色路径
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 进行绘制


// 第二段路径
ctx.beginPath();
ctx.strokeStyle="blue"; // 蓝色路径
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // 进行绘制

20200916145705

去掉第二个beginPath试试:

20200916145757

在第二个stroke, 这个路径包括两个线段, 因此会覆盖第一次stroke画的红色线段.

closePath则是完全不同的作用.

笔点返回到当前子路径起始点的方法。它尝试从当前点到起始点绘制一条直线。如果图形已经是封闭的或者只有一个点，那么此方法不会做任何操作。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();

20200916150431

去掉closePath的效果:

20200916150509