Método de implementación de cómo Canvas dibuja segmentos de línea.

Para aprender Canvas, primero debe saber cómo dibujar segmentos de línea y luego puede usar muchos segmentos de línea simples para realizar gráficos más complejos. Por ejemplo, los gráficos comunes, los gráficos de barras, los gráficos de líneas, etc., se implementan a través de segmentos de línea.

El conocimiento básico del lienzo no es mucho. Principalmente sé dibujar segmentos de línea, gráficos, imágenes, texto, etc. El lienzo se puede dibujar en el navegador o se pueden dibujar imágenes simples en el servidor de nodo con la ayuda de node-canvas. Este artículo solo registra el dibujo en el navegador. En cuanto a cómo dibujar en el lado del nodo, puede verificar la información relevante usted mismo.

Para dibujar en el navegador, primero defina el elemento lienzo en HTML. El ancho y alto predeterminados son 300 * 150, que se pueden configurar por width y height . Tenga en cuenta que el ancho y el alto del estilo del elemento del lienzo y el ancho y el alto del lienzo del dibujo del lienzo no son lo mismo. Esto se discutirá más adelante.

 <canvas id=canvas> <p>El navegador actual no es compatible con Canvas, actualice su navegador</p></canvas>

Antes de dibujar, primero debemos obtener el contexto de dibujo 2D del lienzo actual y luego dibujar operando el contexto.

 let canvas = document.querySelector('#canvas');if (!canvas) { throw new Error('no se puede encontrar el elemento del lienzo');}// Nota 2d. Los parámetros deben estar en minúsculas; en webgl, puede obtener el contexto del dibujo 3D let ctx = canvas.getContext('2d');

Nota: El fragmento de código anterior se ignorará en ejemplos posteriores y ctx se usará directamente para representar el contexto de dibujo 2D del lienzo.

Echemos un vistazo al sistema de coordenadas en el dibujo 2D del lienzo. La esquina superior izquierda del elemento del lienzo actual es el origen de las coordenadas (0,0), la dirección horizontal a la derecha es la dirección positiva del eje X y la dirección horizontal a la derecha es la dirección positiva del eje X. La dirección vertical hacia abajo es la dirección positiva del eje Y, como se muestra a continuación. Puede operar el sistema de coordenadas mediante traslación, rotación y escala para lograr algunas animaciones. Esta parte se explicará en detalle en la sección de conocimientos de animación.

Al dibujar un segmento de línea simple, generalmente primero establece el estilo del segmento de línea, como el color, el ancho de la línea, el estilo del extremo de la línea, etc. Configuramos el estilo de dibujo global de ctx configurando strokeStyle , que puede ser rgba o hexadecimal legal. color, valor u objeto degradado, etc. El siguiente código simplemente dibuja un segmento de línea roja con un ancho de 10 desde (10,10) hasta (50,60).

 ctx.strokeStyle = 'rojo';ctx.lineWidth = 10;ctx.moveTo(10, 10);ctx.lineTo(50, 60);ctx.stroke();

Primero veamos los métodos y propiedades relacionados con el dibujo de segmentos de línea.

Propiedades relacionadas:

• lineCap, este valor le dice al navegador cómo dibujar los puntos finales del segmento de línea. El valor opcional es uno de los tres siguientes: tope, redondo, cuadrado. El valor predeterminado es trasero.
• lineWidth, este valor determina el ancho de píxeles del segmento de línea. No debe ser negativo ni infinito; el valor predeterminado es 1,0.
• lineJoin determina cómo dibujar el foco cuando dos segmentos de línea se cruzan. Solo tendrá efecto cuando los dos segmentos de línea tengan direcciones diferentes. Valores posibles: bisel, redondo, inglete. El valor predeterminado es inglete.
• miterLimit, le dice al navegador cómo dibujar el foco del segmento de línea en forma de inglete. Solo es válido cuando lineJoin = 'miter' y el valor predeterminado es 10.0.
• lineDashOffset, establece el desplazamiento del guión, el valor predeterminado es 0.0.

Métodos relacionados:

• BeginPath borra todas las subrutas en la ruta actual para restablecer la ruta actual. Generalmente, se debe llamar primero al dibujar una forma cerrada.
• closePath, muestra una ruta cerrada. Este método se utiliza para trazados de arco cerrado y trazados abiertos creados a partir de curvas o segmentos de línea.
• moveTo, mueve el punto de dibujo actual a las coordenadas especificadas.
• lineTo dibuja un segmento de línea desde el punto anterior hasta el punto de coordenadas especificado.
• setLineDash, un método utilizado para establecer una línea discontinua. El parámetro es una matriz que indica la longitud de la línea continua dibujada y la longitud del espacio entre las líneas continuas.

Intente configurar diferentes valores lineCap para dibujar el mismo segmento de línea

 ctx.lineWidth = 10;ctx.textAlign = 'center';let colores = ['rojo', 'verde', 'azul'];let lineCaps = ['trasero', 'redondo', 'cuadrado'];for ( let [index, lc] of lineCaps.entries()) { ctx.strokeStyle = colours[index] //Establece el color del segmento de línea ctx.lineCap = lc; ctx.beginPath(); // Borrar la ruta actual ctx.moveTo(10, 20 + 20 * index); ctx.lineTo(50, 20 + 20 * index); 80, 25 + 20 * índice);}

Como se puede ver en los resultados de la figura anterior, cuando lineCap se establece en redondo y cuadrado, se agregarán puntos finales de cierta longitud a ambos extremos del segmento de línea original, excepto que redondo es un estilo de arco y cuadrado es un estilo rectangular. estilo. Una cosa a tener en cuenta es que solo puede existir una ruta actual en el contexto de dibujo del lienzo al mismo tiempo. Para dibujar diferentes segmentos de línea, se debe llamar beginPath() antes de cada dibujo para borrar la ruta actual y comenzar una nueva ruta.

Intentemos usar diferentes valores lineJoin para dibujar los estilos en el foco de los dos segmentos de línea.

 ctx.lineWidth = 20;ctx.textAlign = 'center';ctx.lineCap = 'butt';let colores = ['rojo', 'verde', 'azul'];let lineJoins = ['bisel', 'redondo' , 'inglete'];for (let [index, lj] of lineJoins.entries()) { ctx.strokeStyle = colores[index]; //Establece el color del segmento de línea ctx.lineJoin = lj; //Establece lineJoin ctx.beginPath(); //Borra la ruta actual ctx.moveTo(10 + 80 * index, 20); 80 * índice, 20); ctx.lineTo(50 + 80 * índice, 60); ctx.fillText(lj, 40 + 80 * índice, 80);}

Se puede ver que los tres tipos lineJoin son diferentes en el procesamiento del foco de los dos segmentos de línea. Entre ellos, al configurar lineJoin=miter , la relación máxima entre la longitud de la línea de inglete y la mitad del ancho de la línea se puede establecer configurando el atributo miterLimit . Cuando se excede esta relación, lineJoin adoptará el método de bisel.

Canvas no solo puede dibujar líneas continuas, sino también líneas de puntos. Dibuje una línea de puntos configurando la propiedad lineDashOffset y llamando a setLineDash() .

 ctx.lineWidth = 10;ctx.textAlign = 'center';ctx.setLineDash([8, 8]); //Representa 8 píxeles en la parte de la línea continua y 8 píxeles en la parte del espacio en colores = ['red', 'verde', 'azul'];let lineDashOffsets = [1, 2, 4];for (let [index, ldOffset] de lineDashOffsets.entries()) { ctx.strokeStyle = colores[index]; //Color del segmento de línea ctx.lineDashOffset = ldOffset; //El desplazamiento se establece ctx.beginPath(); 100, 20 + 20 * índice); ctx.fillText(`lineDashOffset:${ldOffset}`, 160, 25 + 20 * índice);}

Como puede ver en la imagen, lineDashOffset es el conjunto de desplazamiento para comenzar a dibujar la línea de puntos. El método setLineDash() acepta un parámetro de matriz. Si el número de matrices es un número impar, copiará el elemento de la matriz actual de forma predeterminada para convertirlo en un número par. Desde el elemento 0, representa la longitud de la parte de línea continua, el primer elemento representa la longitud de la parte de espacio, el segundo elemento representa la longitud de la parte de línea continua, el tercer elemento representa la longitud de la parte de espacio, si llega al último elemento de la matriz, comenzará desde cero nuevamente, y así sucesivamente.

 ctx.lineWidth = 10;ctx.textAlign = 'center';let colores = ['rojo', 'verde', 'azul', 'gris'];let lineDashes = [[20, 20], [40, 40] , [20, 40], [20, 40, 20]];for (let [index, ld] of lineDashes.entries()) { ctx.strokeStyle = colores[index]; //Establecer color ctx.setLineDash(ld); //Establecer lineDash ctx.beginPath(); + 20 * índice); ctx.stroke(); ctx.fillText(`lineDashes:[${ld}]`, 240, 25 + 20 * índice);} 

 let lineDashOffset = 0; //lineDashOffsetctx.strokeStyle inicial = 'verde'; función animate() { if (lineDashOffset > 25) { lineDashOffset = 0; ctx.clearRect(0, 0, ancho, alto); lienzo actual ctx.lineDashOffset = -lineDashOffset //Establecer lineDashOffset; ctx.setLineDash([4, 4]); //Establece la longitud de la línea sólida y la longitud del espacio ctx.rect(20, 20, 100, 100); //Dibuja un rectángulo ctx.stroke(); //Agrega la ruta actual al lienzo Trazo lineDashOffset += 1; //lineDashOffset offset más 1 window.requestAnimationFrame(animate); //Utiliza la velocidad de fotogramas del navegador para ejecutar repetidamente la función de animación}animate();

Al dibujar un segmento de línea, debe comprender el concepto de la ruta actual del lienzo. En un momento determinado, solo hay una ruta actual en el lienzo. Al iniciar una nueva ruta, se debe llamar beginPath() . Puede establecer el estilo de dibujo de los segmentos de línea configurando lineWidth , lineCap y lineJoin . Al trazar un segmento de línea, puede establecer el color del segmento de línea a través de strokeStyle .

No solo se pueden dibujar líneas continuas en el lienzo, sino que también se pueden dibujar líneas discontinuas mediante lineDashOffset y setLineDash() .

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.