Resumen de aprendizaje de Canvas tres: dibujar trazados: segmentos de línea

Algunos métodos de dibujo en el entorno de dibujo de Canvas son métodos de dibujo inmediatos y algunos métodos de dibujo se basan en rutas.

Solo hay dos métodos para dibujar gráficos inmediatamente: StrokeRect() y fillRect(). Aunque los métodos StrokezText() y fillText() también se dibujan inmediatamente, el texto no se considera un gráfico.

La mayoría de los sistemas de dibujo, como: SVG (Scalable Verctor Graphics, gráficos vectoriales escalables), Adobe Illustrator, etc., se basan en trazados.

Al utilizar estos sistemas de dibujo, primero debe definir un trazado y luego trazarlo o rellenarlo, o puede trazarlo y rellenarlo para que se pueda mostrar la forma.

Tres métodos de dibujo en Canvas:

En el entorno de dibujo de Canvas, los segmentos de línea también se dibujan en función de rutas, llamadas rutas lineales. Los métodos para crear rutas lineales son: moveTO() y lineTo(). Solo llamando al método trazo() después de crear la ruta se puede crear la línea. Los segmentos se dibujarán en Canvas.

Este es el método de dibujo basado en trazados que mencionamos anteriormente, que debe trazarse o rellenarse;

Por lo general, dos puntos están conectados por una línea, por lo que dibujar un segmento de línea es muy simple. Especifique el punto inicial de la línea mediante moveTO () y muévase a otro punto mediante lineTo ().

 función drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(100, 100);}

Sin embargo, no podemos ver los segmentos de línea en el lienzo. Anteriormente mencionamos que el método de dibujo basado en rutas debe tener trazos o rellenos. Entonces, para ver el resultado, también debemos usar el método trazo().

Entonces modificamos el método a lo siguiente para que se dibuje un segmento de línea

 función drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(200, 200);

También podemos dibujar segmentos de línea en el lienzo usando solo lineTo(). Cambiamos el código anterior como se muestra a continuación y el efecto es el mismo.

 función drawLine(){ cxt.lineTo(50, 50); cxt.lineTo(200, 200);

Resumir el uso de moveTo() y lineTo()

• moveTo(x,y): mueve el trazo a las coordenadas x e y especificadas, agregando una subruta a la ruta actual. Este método no borrará ninguna subruta en la ruta actual.
• lineTo(x,y): dibuja una línea recta desde la posición actual hasta las posiciones x e y especificadas. Si no hay subrutas en la ruta actual, este método se comporta igual que moveTo(). Si hay una subruta en la ruta actual, este método agregará el punto que especifique a la subruta.

Cambiar el ancho de un segmento de línea

 función= 14; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

 función drawLine(){ cxt.lineWidth = 14; cxt.strokeStyle = 'verde'; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

También podemos usar el objeto CanvasGradient o el objeto CanvasPattern para agregar colores o patrones degradados a segmentos de línea.

 función drawLine(){ cxt.lineWidth = 14; var gradiente = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2); gradient.addColorStop(0, 'azul'); 0.5, 'púrpura'); gradient.addColorStop(1, 'amarillo'); gradiente; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

De los tres métodos de dibujo en el lienzo de arriba, podemos ver que el camino del arco en la segunda fila es un camino abierto y el camino del arco en la última fila es un camino cerrado. Entonces, ¿cómo se logra un camino cerrado?

Echemos un vistazo a dos de los métodos más importantes para dibujar trazados en un lienzo.

• comenzarPath(): borre todas las subrutas actuales para restablecer la ruta actual y volver a planificar una ruta.
• closePath(): se utiliza para cerrar un camino abierto. No es necesario si el gráfico ya está cerrado, es decir, el punto actual es el punto de partida, esta función no hace nada.

Primero dibuja una polilínea

 función drawLine(){ cxt.strokeStyle = 'verde'; cxt.lineWidth = 2; cxt.moveTo(50, 50); cxt.lineTo(50, 150); );}

Modifique el código en el ejemplo anterior y agregue los métodos beginPath() y closePath() al código.

 function drawLine(){ // Trazo de triángulo cxt.strokeStyle = 'green'; cxt.lineWidth = 2; cxt.beginPath(); cxt.moveTo(50, 50); (); cxt.beginPath(); cxt.lineTo(150, 150); cxt.lineTo(150, 250); cxt.stroke(); cxt.closePath();}

Se puede ver que hemos dibujado dos caminos en el lienzo.

Nota: Después de llamar a beginPath(), o cuando se crea el lienzo por primera vez, el primer comando de construcción de ruta generalmente se considera moveTo(). Por lo tanto, primero debemos usar BeginPath() al dibujar gráficos.

Sigamos modificando nuestro código.

 function drawLine(){ // Traza el triángulo cxt.strokeStyle = 'green'; cxt.lineWidth = 2; cxt.beginPath(); (150, 150); cxt.closePath(); //Polilínea cxt.translate(150, 0); cxt.strokeStyle = 'rojo'; cxt.lineWidth = 2; cxt.beginPath(); cxt.lineTo(150, 150); cxt.stroke(); cxt.closePath(); // Triángulo relleno de verde cxt.translate(150, 0); cxt.fillStyle = 'green'; cxt.lineWidth = 2; .lineTo(50, 150); cxt.lineTo(150, 150); cxt.fill(); cxt.closePath(); //Triángulo relleno de rojo cxt.translate(150, 0); cxt.fillStyle = 'red'; cxt.lineWidth = 2; 50, 50); cxt.líneaA(50, 150); 150); cxt.closePath(); cxt.fill();}

En el ejemplo anterior, podemos ver que las diferentes posiciones de closePath() también afectarán a nuestros gráficos.

Nota: Cuando llamas a la función fill(), todas las formas no cerradas se cerrarán automáticamente, por lo que la función closePath() no es necesaria en este momento.

Pero llamar a Stroke(): si solo usa closePath() antes del método Stroke(), se formará una ruta cerrada. Si llama al método closePath() después del método Stroke(), los gráficos se habrán dibujado y serán los actuales. La ruta de dibujo se ha cerrado, por lo que el método closePath() no funciona.

Veamos primero un ejemplo.

 function drawLine(){ //Trazo del triángulo cxt.lineWidth = 1; cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(450, 50); ; cxt.moveTo(50.5, 150.5); cxt.lineTo(450.5, 150.5); cxt.stroke();}

Podemos ver en la imagen que configuramos el ancho de línea de ambos segmentos de línea en 1 píxel, pero el segmento de línea de arriba dibuja dos píxeles.

Si dibuja un segmento de línea de 1 píxel de ancho en el límite de ciertos 2 píxeles, el segmento de línea en realidad ocupará 2 píxeles de ancho;

Porque cuando dibuja un segmento de línea vertical de 1 píxel de ancho en un borde de píxel, el objeto del entorno de dibujo del lienzo intentará dibujar medio píxel a la derecha de la línea central del borde y el otro medio píxel a la izquierda del borde. línea central.

Sin embargo, no es posible dibujar un segmento de línea de medio píxel de ancho dentro de un píxel completo, por lo que medio píxel en ambas direcciones se expande a 1 píxel.

Por otro lado, el dibujo se realiza entre dos píxeles, de modo que los medios píxeles en los extremos izquierdo y derecho de la línea central no se extenderán y, combinados, ocuparán exactamente el ancho de 1 píxel. Entonces, si desea dibujar un segmento de línea que realmente tenga 1 píxel de ancho, debe dibujar el segmento de línea entre dos píxeles.

Ahora que entendemos cómo dibujar un segmento de línea real de 1 píxel, comencemos a dibujar la cuadrícula.

 function drawLine(stepx, stepy){ cxt.lineWidth = 0.5; cxt.strokeStyle = 'green'; //Dibuja una línea vertical para(var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){ cxt .beginPath(); cxt.moveTo(yo, 0); cxt.lineTo(yo, cxt.canvas.height); cxt.stroke(); } //Dibuja una línea horizontal for(var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){ cxt.beginPath(); moverA (0, i); cxt.lineTo(cxt.canvas.width, i); cxt.stroke(); }}DibujarLínea(10, 10);

En el ejemplo anterior, dibujamos el segmento de línea en el píxel entre dos píxeles, y el segmento de línea dibujado tiene solo 0,5 píxeles de ancho.

Aunque la especificación del lienzo no lo estipula explícitamente, todas las implementaciones de Canvas del navegador utilizan tecnología anti-aliasing para crear efectos de dibujo de segmentos de línea de subpíxeles.

Esta sección explica principalmente el método para dibujar rutas lineales en el lienzo, utilizando principalmente moveTo() para definir el punto inicial, lineTo() para definir el punto final y trazo() para dibujar la ruta actual. Estos tres métodos dibujan segmentos de línea.

Hay dos métodos importantes para dibujar rutas en el lienzo, comenzarPath() y closePath(). Llamar a beginPath() antes de dibujar gráficos es un paso necesario para dibujar varios gráficos.

closePath() se puede omitir cuando se usa fill(), y también se debe prestar atención a la posición de llamada del método closePath().

Al dibujar un segmento de línea, podemos usar lineWidth para cambiar el ancho del segmento de línea y StrokeStyle para cambiar el color del segmento de línea.

Calcule los límites de píxeles del segmento de línea para que podamos dibujar un ancho de línea real de 1 píxel.

Los estudiantes que estén interesados ​​en dibujar gráficos sobre lienzo, continúen prestando atención a las actualizaciones posteriores. Si hay algún problema, indíquelo y comuníquese más.

Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.