画布路径到底是什么，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() 函数a>，但是 JCanvas 没有给我提供检查线相交的方法，我挖了源码，发现使用了 ctx 对象，在我使用的函数的最后，我返回了对象，所以我可以使用 ctx.isPointInPath() 方法来实现我需要的，但不起作用，每次都返回 false...

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() 是否会返回 true 仅用于使用 ctx.moveTo 设置的点() 在 ctx.beginPath() 之后?或者它会为使用 ctx.lineTo() 连接的 2 个连续 ctx.moveTo() 之间的所有点返回 true?

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();
}

推荐答案

什么是路径?

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

• 如上所示，我们使用第一个 moveTo 和两个 lineTo 命令绘制了一个 V 符号.当我们在红色路径上调用 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() 不同，您每次都必须调用它开始绘制新路径.(如果不这样做，所有旧的路径绘制命令都是下一次绘制的一部分.)

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屋！