25

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

我实际上正在使用JCanvas 中的drawLine()函数，但是 JCanvas 没有为我提供检查线交点的方法，我在源代码中挖掘并找到了使用ctx对象，并且在我使用的函数结束时，我返回了对象，所以我可以使用该ctx.isPointInPath()方法来实现我需要的，但不工作，false每次都返回......

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

有什么用ctx.closePath()？

和有什么区别：

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

和：

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

2 回答 2

53

什么是路径？

它是定义矢量形状边界的一系列路径命令（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();

                                          在此处输入图像描述

UsingclosePath()使笔的点移回当前子路径的起点，从当前点画一条线回到该起点；下一个命令从这个新点开始。如果您想在不显式绘制最后一行的情况下绘制完全轮廓的形状，这很有用。

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

  • 如上所示，我们使用前两个命令和后两个命令绘制V符号。当我们调用红色路径时，它会绘制水平条并导致下一行从左上角开始。moveTolineToclosePath

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

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

于 2012-05-29T22:22:06.930 回答
17

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

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()是起点和终点是有界的。

封闭路径

于 2013-04-19T12:33:39.187 回答