我需要拥有content.beginPath()和content.closePath()吗？

Question

为了使这条线绘制出来，或者说为了绘制所有的图像，beginPath和closePath是否必须包含在代码中？我有一本新的HTML 5画布书，但我并不完全确定。我注释掉这两行代码，但是这条线仍然显示。这两行代码的意义是什么。

问题：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();

- user3376708

Answer 1

不需要使用beginPath和closePath。

画布上下文有一个当前路径。您可以使用moveTo和lineTo等方法向该路径添加指令。构建完路径后，您可以使用stroke和fill等方法，使用当前路径在画布上绘制。 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();

- icktoofay

---

这些路径是否保存在画布中，以便您可以从索引类型的情况下调用它们。在您上面的示例中，您没有使用beginPath()和endPath()，因此这些仅附加到旧画布上。 - user3376708

@user3376708：每次只能保存一条路径，beginPath 会丢弃当前路径。如果你想要回到旧的路径，你需要调用 beginPath 来丢弃当前路径，然后从单个指令中重建旧的路径。（我不太明白你所说的“索引类型情况”是什么意思。） - icktoofay

Answer 2

beginPath() 方法清除旧的路径，以便您可以定义新的路径。

closePath() 方法将第一个点与最后一个点连接起来，在此示例中不需要使用。无论如何，它必须在描边或填充之前使用才能对光栅化结果产生影响。

- user1693593

---

有没有一种方法可以召回先前使用过的路径？在画布上可以有五个beginPath()和五个closePath()，能否召回第二条路径。 - user3376708

未来将会有可以使用单独的路径对象的情况。然而，目前还没有完全实现这一点的浏览器。因此，您现在需要逐个重新创建路径。 - user1693593

使用路径对象会有好处，因此最好像有理由一样使用它们。 - user3376708