beginPath

绘制路径必须添加 beginPath()。它标志着一个画笔在画布中哪个地方开始画起。没有它，新起的画笔位置必定与上一次画笔结束的位置相连。

// 第一个半圆

ctx.arc(60, 80, 50, 0, Math.PI, true);

ctx.fillStyle = 'gold';

ctx.fill();

ctx.strokeStyle = 'red';

ctx.stroke();

// 第二个半圆

ctx.arc(240, 200, 50, 0, Math.PI, false);

ctx.fillStyle = 'gold';

ctx.fill();

ctx.strokeStyle = 'green';

ctx.stroke();

可以看到半圆的两个端点与另一个半圆的两个端点互连起来了，如果不用 beginPath()，画布就无法确定画笔新的起始点在哪里，默认就连起来绘制路径。就好像是我们写连笔字一样，笔画与笔画之间相连不断。

当我们在每一个新的画笔开始前写上 beginPath() 函数后，最终效果如下图：

closePath

一般情况下，beginPath() 和 closePath() 是搭配使用的，就是说，画笔从开始绘制路径结束之后，画笔回到起始点。就像是我们用完一件物品之后，要把它换回到原来的地方一样。

利用 closePath()，我们可以用绘制一个三角形：

ctx.beginPath();

ctx.moveTo(20, 20);

ctx.lineTo(100, 140);

ctx.lineTo(20, 140);

ctx.closePath(); // 画笔置于起始位置，(20, 20)

ctx.stroke();

其实也可以不用 closePath() 把画笔置于起始位置，可以用 ctx.lineTo(20, 20); 继续把路径延续下去。也就是说，closePath() 在路径中可以被省略。

stroke

stroke() 函数也是绘制路径的关键，图形的绘制由它来完成，在此之前我们要确定好路径的起始坐标以及结束坐标即可。

ctx.beginPath();

ctx.arc(150, 150, 100, 0, Math.PI * 2, true);

因为没有调用 stroke() 函数完成路径的绘制，所以画布中什么图形都没有出现：

补全这个关键的函数之后，画布出现了圆形：

巴特西

Canvas 非常重要的三个函数

beginPath

closePath

stroke

最新文章

热门文章