我必须拥有content.beginPath（）和content.closePath（）吗？

Question

是否必须为此行绘制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();

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();

Answer 2

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

closePath()将第一个点与最后一个点连接起来，在您的示例中不需要。在任何情况下，它都会在抚摸填充之前使用，以对栅格化结果产生影响。