javascript 画布路径到底是什么，ctx.closePath()有什么用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10807230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What exactly is a canvas path, and what is the use of ctx.closePath()?
提问by Aronis Mariano
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.
我正在开发 HTML5 游戏。我需要在画布中绘制尾线并检查游戏中的交叉点，这是一个 Tron 风格的游戏。
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 ctxobject, 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 falseeverytime...
我实际上使用的drawLine()是 JCanvas的函数，但是 JCanvas 没有为我提供检查线相交的方法，我在源代码中挖掘并找到了 usectx对象，并且在我使用的函数结束时，我返回了对象，所以我可以使用该ctx.isPointInPath()方法来实现我需要的东西，但不起作用，false每次都返回......
I really don't understand what a path is - will ctx.isPointInPath()return truejust for the points that are set using ctx.moveTo()after ctx.beginPath()? Or will it return truefor all the points that are between 2 consecutive ctx.moveTo()s that are connected using ctx.lineTo()?
我真的不明白什么是路径 - 将只ctx.isPointInPath()返回true使用ctx.moveTo()after设置的点ctx.beginPath()？或者它会返回使用连接的true2 个连续ctx.moveTo()s之间的所有点ctx.lineTo()？
What is the use of ctx.closePath()?
有什么用ctx.closePath()？
And what is the difference between:
和有什么区别：
{
ctx.closePath();
ctx.fill();
ctx.stroke();
}
and:
和：
{
ctx.fill();
ctx.stroke();
ctx.closePath();
}
回答by Phrogz
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.
它是一系列定义矢量形状边界的路径命令（moveTo、lineTo、arcTo 等）。然后，您可以根据需要填充和/或描边路径。
What is the Use of closePath()?
有什么用closePath()？
Demo: http://jsfiddle.net/YrQCG/5/
演示：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();
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.
使用closePath()使笔的点移回到当前子路径的起点，从当前点画一条线回到那个起点；下一个命令从这个新点开始。如果您想在不明确绘制最后一行的情况下绘制完全轮廓的形状，这将非常有用。
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).
这相当于调用lineTo()当前子路径的第一个点的位置，然后调用moveTo()相同的点（以建立新的子路径）。
Seen above, we draw a
Vsymbol using the firstmoveToand following twolineTocommands. When we callclosePathon the red path it draws the horizontal bar across and causes the next line to start from the top left corner.When we don't call
closePathin the blue path the nextlineTocommand continues on from the last drawn point.
如上所示，我们
V使用第一个moveTo和以下两个lineTo命令绘制符号。当我们调用closePath红色路径时，它会绘制横条并导致下一行从左上角开始。当我们不在
closePath蓝色路径中调用时，下一个lineTo命令会从最后绘制的点继续。
Note that closePath()is notnecessary 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.)
请注意，closePath()是没有必要的大部分时间，不像beginPath()你必须要开始绘制新的路径，每次打电话。（如果你不这样做，所有旧的路径绘制命令都是下一个绘图的一部分。）
回答by Aronis Mariano
This is the basic representation of closed path:
这是封闭路径的基本表示：
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();
The result of closePath()is that the start and the end point will be bounded.
的结果closePath()是起点和终点将是有界的。
