La función de beginPath es muy simple, es iniciar un nuevo camino, pero es muy importante en el proceso de uso del dibujo del lienzo.
Primero veamos un pequeño fragmento de código:
var ctx=document.getElementById(canvas).getContext(2d); ctx.beginPath(); ctx.rect(0,0,100,100); .fillStyle=amarillo; ctx.fill();
Nuestro código no tiene errores, pero obtenemos dos cuadrados amarillos con una longitud lateral de 100 px, en lugar de uno verde y otro amarillo.
De hecho, los métodos de dibujo (rellenar, avivar) en el lienzo dibujarán todas las rutas después del último inicio de ruta. En el código anterior, el primer rectángulo se llena dos veces, la primera vez es verde y la segunda es amarilla, por lo que dos rectángulos amarillos. Se obtuvieron de manera similar para dibujar segmentos de línea u otras curvas o gráficos, sin importar a dónde se mueva, siempre que no tenga una ruta inicial, está dibujando una ruta.
Si los gráficos que dibujas no coinciden con lo que imaginaste, recuerda marcar BeginPath.
Cuando hablamos de BeginPath, debemos mencionar closePath. De hecho, los dos no tienen nada que ver entre sí. closePath significa cerrar el camino, no finalizar el camino. Simplemente conecta el punto final del camino con el punto inicial. , no para iniciar un nuevo camino.
Agregamos un closePath después del primer llenado del código anterior y aún obtenemos dos rectángulos amarillos.
Pero si luego agregamos una ruta de inicio, obtendremos dos rectángulos de diferentes colores.
En resumen, no intente iniciar una nueva ruta cerrando una sección de la ruta, y si no cierra la ruta, incluso si comienza una nueva ruta, no se cerrará.
Suplemento: comprensión de Beginpath y Closepath del lienzométodo comenzarPath()
var ctx = documento.getElementById('cvs').getContext('2d');ctx.beginPath();ctx.movTo(100.5,20.5); ; ctx . mover a ( 100,5 , 40,5 ) ; ctx.lineTo (200.5, 40.5) ctx.estilodetrazo = '#f00';El 0,5 es para evitar líneas borrosas. Entonces, ¿qué tipo de gráficos obtendrá el código anterior? ¿Es una línea negra y una línea roja?
Desde el punto de vista del código, no hay ningún problema con nuestra lógica, pero el resultado es que obtenemos dos líneas rojas, no una negra y otra roja.
Si comprende por qué es así, no es necesario que lea el resto. Ésta es la importancia de comenzarPath.
Los métodos de dibujo en el lienzo (como trazo, relleno) se dibujarán en función de todos los trazados después del último inicio de ruta. Por ejemplo, tracé dos veces en el código anterior. De hecho, estos dos trazos se basan en todas las rutas después del primer inicio. Es decir, trazamos el primer trazo dos veces. El primer trazo era negro y el segundo era rojo, por lo que al final también era rojo.
1. No importa dónde uses moveTo para mover el pincel, siempre que no comiences Path, siempre estarás dibujando un camino.
2. Funciones como fillRect y StrokeRect, que dibujan áreas independientes directamente, no interrumpirán la ruta actual.
Si los gráficos que dibuja son diferentes de lo que imaginaba, recuerde verificar si existe una ruta de inicio razonable.
-------
Hablando de beginPath, debemos mencionar closePath. ¿Están los dos estrechamente relacionados? La respuesta es casi nada.
closePath no significa finalizar el camino, sino cerrar el camino. Intentará conectar un camino desde el final del camino actual hasta el punto inicial para cerrar todo el camino. Sin embargo, ¡esto no significa que el camino posterior sea el nuevo camino!
Agregamos closePath después de la primera línea To en el código anterior y podemos encontrar que todavía tenemos dos líneas rojas.
Pero si agregamos startPath después del primer trazo, obtendremos una línea negra y una línea roja como se esperaba.
ctx.trazo(); ctx.startPath(); //¡Atención! ctx.moveTo (100.5, 40.5); ctx.lineTo (200.5, 40.5) ctx.
En resumen, no intente iniciar una nueva ruta cerrando una ruta existente. Cuando inicie una nueva ruta, la ruta anterior no se cerrará.