到底什么是帆布路径，有什么用ctx.closePath的（）？(What exactly is a

我工作的HTML5游戏。我需要绘制在画布上尾线并为您在游戏中，这是一个开创式的游戏路口。

实际上，我使用的drawLine()从JCanvas功能，但JCanvas没有提供我一个方法来检查线的交点，我挖源，发现使用ctx对象，并在我的函数结束使用，我返回的对象，所以我可以用ctx.isPointInPath()方法来实现我所需要的，但不能正常工作，将返回false ，每次...

我真的不明白的路径是什么-将ctx.isPointInPath()返回true只是对于使用设定点ctx.moveTo()后ctx.beginPath() 还是会回到true的是在2个连续的所有点ctx.moveTo() S中的连接使用ctx.lineTo()

有什么用的ctx.closePath()

和之间有什么区别：

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

和：

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

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()是起始和结束点将被界定。