画布路径到底是什么，ctx.closePath（）的用途是什么？

Question

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

我实际上正在使用the drawLine() function from JCanvas，但是JCanvas没有为我提供检查行交叉的方法，我挖掘了源代码并发现使用ctx对象，并在结束时我正在使用的函数，我返回了对象，所以我可以使用ctx.isPointInPath()方法来实现我需要的，但是不起作用，每次都返回false ...

我真的不明白路径是什么 - ctx.isPointInPath()只会true之后使用ctx.moveTo()设置的点会ctx.beginPath()返回true吗？或者，对于使用ctx.moveTo()连接的2个连续ctx.lineTo()之间的所有点，它会返回ctx.closePath()吗？

{ ctx.closePath(); ctx.fill(); ctx.stroke(); } 有什么用？

之间有什么区别：

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

和

{{1}}

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()调用同一个点（以建立新的子路径）。

• 如上所述，我们使用第一个V和两个moveTo命令绘制lineTo符号。当我们在红色路径上调用closePath时，它会绘制水平条，并使下一行从左上角开始。

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

请注意，closePath()大部分时间都不需要 ，这与每次要开始绘制新路径时必须调用的beginPath()不同。 （如果不这样做，则所有旧的路径绘制命令都是下一个绘图的一部分。）

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()的结果是起点和终点将受限制。