javascript - 我是否必须具有content.beginPath()和content.closePath()？

是否必须包含beginPath和closePath才能绘制此行或绘制所有图形。我有一本新的HTML 5 Canvas书，但是我不确定。我注释掉了两行，仍然显示该行。这两条线的意义是什么。

问题:beginPath()和closePath()有什么作用？

码:

context.lineJoin='round';
context.lineCap='butt';
context.beginPath();
context.moveTo(10, 100);
context.lineTo(35, 100);
context.lineTo(35,125);
context.stroke();
context.closePath();

最佳答案

不，不需要beginPath和closePath。

Canvas 上下文具有当前路径。您可以使用moveTo和lineTo等方法向该路径添加指令。构造路径完成后，可以使用stroke和fill之类的方法，这些方法使用当前路径在 Canvas 上绘制。
closePath只是您可以添加的另一条指令。在使用fill时，您可能不会注意到它的效果，但是在使用stroke时，它(基本上)将回到起始位置，“关闭”路径。比较和对比:

ctx.moveTo(10, 10);    ctx.moveTo(10, 10);
ctx.lineTo(90, 10);    ctx.lineTo(90, 10);
ctx.lineTo(90, 90);    ctx.lineTo(90, 90);
                       ctx.closePath();
ctx.stroke();          ctx.stroke();

另一方面，beginPath放弃先前的路径，让您开始新的路径。没有它，您将越来越多地附加到先前的路径，这可能是不可取的。比较和对比:

ctx.moveTo(10, 10);           ctx.moveTo(10, 10);
ctx.lineTo(90, 10);           ctx.lineTo(90, 10);
ctx.lineWidth = 4;            ctx.lineWidth = 4;
ctx.strokeStyle = "red";      ctx.strokeStyle = "red";
ctx.stroke();                 ctx.stroke();
                              ctx.beginPath();
ctx.moveTo(10, 20);           ctx.moveTo(10, 20);
ctx.lineTo(90, 20);           ctx.lineTo(90, 20);
ctx.lineWidth = 2;            ctx.lineWidth = 2;
ctx.strokeStyle = "blue";     ctx.strokeStyle = "blue";
ctx.stroke();                 ctx.stroke();