什么是画布路径，什么是ctx.closePath（）的用途？ [英] What exactly is a canvas path, and what is the use of ctx.closePath()?

问题描述

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

I'm working on an HTML5 game. I need to draw tail lines in the canvas and check for intersections in the game, which is a Tron-style game.

我实际上使用来自JCanvas 的 drawLine（）函数，但JCanvas没有为我提供了一种检查线交叉的方法，我在源中挖掘并找到使用 ctx 对象，并且在我使用的函数的结尾，我返回对象所以我可以使用 ctx.isPointInPath（）方法来实现我需要，但是不工作，返回 false everytime ...

I'm actually using the drawLine() function from JCanvas, but JCanvas did not provide me a way to check for line intersection, I digged in the source and found the use the ctx object, and at the end of the function I'm using, I returned the object so I can use the ctx.isPointInPath() method to achieve what I need, but is not working, is returning false everytime...

我真的不明白什么是路径 - ctx.isPointInPath（） c> return true ctx.beginPath（）？或者将为连接的两个连续 ctx.moveTo（）之间的所有点返回 true ctx.lineTo（）？

I really don't understand what a path is - will ctx.isPointInPath() return true just for the points that are set using ctx.moveTo() after ctx.beginPath()? Or will it return true for all the points that are between 2 consecutive ctx.moveTo()s that are connected using ctx.lineTo()?

ctx.closePath ？

与之间的区别：

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

和：

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

推荐答案

什么是路径？ / h2>

这是一系列定义向量形状边界的路径命令（moveTo，lineTo，arcTo等）。

What is a path?

It's a series of path commands (moveTo, lineTo, arcTo, etc.) that define the boundary of a vector shape. You can then fill and/or stroke the path as desired.

// 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（）会使笔的点返回到当前子路径的开始处，从当前点绘制回到该起点的线;下一个命令从这个新点开始。

Using closePath() causes the point of the pen to move back to the start of the current subpath, drawing a line from the current point back to that starting point; the next command starts from this new point. It's useful if you want to draw a fully outlined shape without explicitly drawing the last line.

这相当于调用 lineTo（）与当前子路径的第一个点的位置，其次是 moveTo（）到同一点（以建立新的子路径）。

It is equivalent to calling lineTo() with the location of the first point of your current subpath, followed by moveTo() to that same point (to establish a new subpath).

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

• Seen above, we draw a V symbol using the first moveTo and following two lineTo commands. When we call closePath on the red path it draws the horizontal bar across and causes the next line to start from the top left corner.

当我们不在蓝色路径中调用 closePath 时，下一个 lineTo 命令继续

When we don't call closePath in the blue path the next lineTo command continues on from the last drawn point.

请注意 closePath不像 beginPath（）那样，你必须在每次想要开始绘制新路径时调用c> （如果没有，所有旧路径绘制命令都是下一个绘图的一部分。）

Note that closePath() is not necessary most of the time, unlike beginPath() which you must call each time you want to start drawing a new path. (If you don't, all the old path drawing commands are part of the next drawing.)

这篇关于什么是画布路径，什么是ctx.closePath（）的用途？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！