什么是画布路径，ctx.closePath()有什么用途？

Question

我正在开发一个HTML5游戏。我需要在画布上绘制尾线，并检查游戏中的交叉点，这是一款类Tron游戏。

实际上，我正在使用JCanvas的drawLine()函数，但是JCanvas没有提供一种检查线段交叉的方法。我查看了源代码并找到了ctx对象的使用，在我使用的函数末尾，我返回了该对象，以便我可以使用ctx.isPointInPath()方法来实现我所需的功能，但是它不起作用，每次都返回false...

我真的不明白路径是什么- ctx.isPointInPath()是否只会针对使用ctx.beginPath()之后使用ctx.moveTo()设置的点返回true？还是它将返回所有连接使用ctx.lineTo()的两个连续ctx.moveTo()之间的所有点的true？ ctx.closePath()有什么用？

还有，以下两者之间有什么区别：

{
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
}

并且：

{
    ctx.fill();
    ctx.stroke();
    ctx.closePath();
}

- Aronis Mariano

---

参考：closePath()规范。 - Phrogz

Answer 1

什么是路径？

路径是一系列路径命令（moveTo、lineTo、arcTo等），用于定义矢量形状的边界。您随后可以根据需要填充和/或描边路径。

closePath()有什么用？

演示：http://jsfiddle.net/YrQCG/5/

// Draw a red path using closePath() in the middle
ctx.beginPath();
ctx.strokeStyle = 'red';
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
ctx.closePath();
ctx.lineTo(50,50);
ctx.stroke();

// Slide the next path over by 150 pixels    
ctx.translate(150,0);

// Draw a blue path using the exact same commands, but without closePath
ctx.beginPath();
ctx.strokeStyle = 'blue';
ctx.moveTo(50,100);
ctx.lineTo(100,150);
ctx.lineTo(150,100);
//ctx.closePath();
ctx.lineTo(50,50);
ctx.stroke();

                                         

使用closePath()会导致笔的位置回到当前子路径的起点，从当前位置向该起点绘制一条线；下一个命令将从这个新点开始。如果您想绘制一个完全轮廓的形状而不显式地绘制最后一条线，则这很有用。

这等效于使用当前子路径的第一个点的位置调用lineTo()，然后使用moveTo()到同一个点（以建立一个新的子路径）。

• 如上所示，我们使用第一个moveTo和接下来的两个lineTo命令绘制了一个V符号。当我们在红色路径上调用closePath时，它会绘制横杠，并使下一条线从左上角开始绘制。

• 当我们在蓝色路径上不调用closePath时，下一个lineTo命令从上次绘制的点继续。

请注意，closePath()大多数情况下是不必要的，不像beginPath() ，您必须每次想要开始绘制新路径时调用它（如果不这样做，则所有旧路径绘制命令都是下一次绘制的一部分）。

- Phrogz

---

谢谢 (: ... 最后一个问题。isPointInPath()会针对最后一个路径进行评估（即使它已经关闭）吗？ - Aronis Mariano

只有一条路径（可能有子路径）。isPointInPath() 方法将针对整个路径（所有子路径）进行测试，包括 closePath() 是否绘制了线条。 （请注意，语句“只有一条路径”适用于上下文；您还可以创建 Path 对象。） - Phrogz

@Aronis 请查看此演示：isPointInPath()不考虑描边，但测试路径的等效填充区域（该演示中的黄色）。点50,50直接位于其中一条线的边缘，但相邻没有填充区域。 - Phrogz

这里还有一个演示，展示了一个测试在路径边缘上的点成功通过，但是与非零填充区域相邻的情况：http://jsfiddle.net/kLZfc/4/ - Phrogz

Answer 2

这是封闭路径的基本表示：

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(100,0);
ctx.lineTo(100,100);
ctx.lineTo(0,100);    
ctx.closePath(); // <--the image right side has this line
ctx.stroke();

closePath() 的结果是起点和终点将被封闭。

- user669677