javascript - getcontext - beginpath

¿Qué es exactamente una ruta de lienzo, y cuál es el uso de ctx.closePath()?

Question

Estoy trabajando en un juego HTML5. Necesito dibujar líneas de cola en el lienzo y buscar intersecciones en el juego, que es un juego estilo Tron.

En realidad estoy usando la función drawLine() de JCanvas , pero JCanvas no me proporcionó una forma de verificar la intersección de líneas, busqué en la fuente y encontré el uso del objeto ctx , y al final de la función estoy Al usar, ctx.isPointInPath() el objeto para poder usar el método ctx.isPointInPath() para lograr lo que necesito, pero no funciona, me devuelve false cada vez ...

Realmente no entiendo qué es una ruta: ¿ ctx.isPointInPath() devolverá true solo para los puntos que se establecen usando ctx.moveTo() después de ctx.beginPath() ? ¿O será true para todos los puntos que están entre 2 ctx.moveTo() s consecutivos que están conectados usando ctx.lineTo() ?

¿Cuál es el uso de ctx.closePath() ?

Y cuál es la diferencia entre:

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

y:

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

Answer 1

¿Qué es un camino?

Es una serie de comandos de ruta (moveTo, lineTo, arcTo, etc.) que definen el límite de una forma de vector. Luego puede llenar y / o trazar la ruta como lo desee.

¿Cuál es el uso de closePath() ?

Demostración: 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();

El uso de closePath() hace que el punto del lápiz vuelva al inicio del subpaso actual, dibujando una línea desde el punto actual hasta ese punto inicial ; el siguiente comando comienza desde este nuevo punto. Es útil si desea dibujar una forma completamente delineada sin dibujar explícitamente la última línea.

Es equivalente a llamar a lineTo() con la ubicación del primer punto de su subtrayecto actual, seguido de moveTo() a ese mismo punto (para establecer un nuevo subpaso).

• Visto arriba, dibujamos un símbolo V usando el primer moveTo y siguiendo dos comandos lineTo . Cuando llamamos a closePath en el camino rojo, atrae la barra horizontal y hace que la siguiente línea comience desde la esquina superior izquierda.

• Cuando no llamamos a closePath en la ruta azul, el siguiente comando lineTo continúa desde el último punto dibujado.

Tenga en cuenta que closePath() no es necesario la mayor parte del tiempo, a diferencia de beginPath() que debe llamar cada vez que desee comenzar a dibujar una nueva ruta. (Si no lo hace, todos los antiguos comandos de trazado forman parte del siguiente dibujo).

Answer 2

Esta es la representación básica de la ruta cerrada:

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

El resultado de closePath() es que el inicio y el punto final serán acotados.