究竟啥是画布路径，ctx.closePath() 有啥用？

Posted 2023-03-24

【中文标题】究竟啥是画布路径，ctx.closePath() 有啥用？

【英文标题】：What exactly is a canvas path, and what is the use of ctx.closePath()?究竟什么是画布路径，ctx.closePath() 有什么用？

【发布时间】：2012-06-04 03:41:21

【问题描述】：

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

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

我真的不明白什么是路径——ctx.isPointInPath() 是否会返回 true 只是为了在 ctx.beginPath() 之后使用 ctx.moveTo() 设置的点？还是会为使用ctx.lineTo() 连接的两个连续ctx.moveTo()s 之间的所有点返回true？

ctx.closePath()有什么用？

和有什么区别：

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

和：

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

【问题讨论】：

参考：specification on closePath().

【参考方案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() 不同，您每次想要开始绘制新路径时都必须调用它。 （如果不这样做，所有旧的路径绘制命令都是下一个绘图的一部分。）

【讨论】：

谢谢（：......最后一个问题 .isPointInPath() 将根据最后一条路径进行评估（即使它已经关闭）??

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

@Aronis See this demo: isPointInPath() 不考虑笔划，但测试路径的等效填充区域（该演示中的黄色）。点50,50 直接沿着其中一条线的边缘，但与无填充区域相邻。

这是另一个演示，展示了一个测试成功的案例，该点恰好位于路径的边缘，但与非零填充区域相邻：jsfiddle.net/kLZfc/4

【参考方案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()的结果是起点和终点是有界的。