Si aún no sabe qué es el lienzo, puede consultar el artículo anterior.
Al aprender a dibujar, las líneas son las más básicas, y la conexión de las líneas puede formar cualquier forma. Lo mismo es cierto en el lienzo.
Antes de comenzar, sacamos el lienzo y los pinceles:
var cvs = document.getElementById ('cvs'); //Lienzo
var ctx = cvs.getContext ('2d'); // Cepillar
Cuando dibujamos, el punto de lápiz no se fija y cambiará en cualquier momento. Aunque el lienzo no determina el punto de escritura a través de las manos, también hay un método, que es Moveto. Moveto es equivalente a levantar la punta de la pluma del lienzo y moverla al punto especificado (es decir, coordenadas).
CTX.moveto (x, y)
No se dibujan gráficos durante este proceso, que es equivalente a balancearse en el lienzo con su bolígrafo.
Pero es inútil balancearse, tenemos que comenzar a dibujar. Dibuja las líneas rectas más simples:
El método de dibujar una línea recta es Lineto. Sus parámetros son los mismos que Moveto, y ambos son el mismo punto.
CTX.lineto (x, y) Por supuesto, cuando dibuja una línea, el punto de lápiz también se mueve, por lo que después de Lineto, el punto de lápiz se convierte en su punto objetivo.
CTX.moveto (100,100);
CTX.Lineto (200,100);
En este momento, actualiza la página web y encontrará que no hay una línea esperada en el lienzo y nada. Porque tenemos un paso menos. Lineto es en realidad un camino dibujado y es invisible por sí mismo. Si queremos que lo muestre, debemos dibujarlo.
Los estudiantes que han usado PS definitivamente conocerán los dos modos de los gráficos, uno se está llenando y el otro es un accidente cerebrovascular. Ahora hemos dibujado una línea, que es equivalente a dibujar una ruta en PS. En este momento, podemos dibujar los bordes de la ruta y se mostrará la figura.
El método de trazo de lona es el trazo (). Ahora completemos el código:
CTX.moveto (100,100);
CTX.Lineto (200,100);
ctx.stroke (); actualizar en este momento y puede ver una línea. Por supuesto, también puede dibujar cientos de caminos en sucesión y luego realizar acciones de accidente cerebrovascular para dibujar cientos de líneas a la vez. Ahora dibujemos un rectángulo con 4 líneas:
CTX.moveto (100,100);
CTX.Lineto (200,100);
CTX.Lineto (200,200);
CTX.Lineto (100,200);
CTX.Lineto (100,100);
ctx.stroke ();
Aquí primero dibujamos todos los caminos y luego los acariciamos uno tras otro.
- La queja del autor: una de las cosas malas sobre el dibujo de lienzo es que básicamente depende de la adivinación, y no es intuitivo.
Consejo serio: el proceso de dibujo del lienzo (es decir, relleno y accidente cerebrovascular) es muy consumidor de recursos. Si desea guardar los recursos del sistema y mejorar la eficiencia, es mejor dibujar todas las rutas y llenar o acariciar la cifra a la vez.
De la figura anterior podemos ver que el grosor de línea predeterminado es 1px, mientras que el color de la línea es negro. Por supuesto, podemos configurarlos, pero lo extraño es que el ancho de la línea es el ancho de línea, mientras que el estilo de línea se llama Strokestyle. ¿Por qué no Linestyle? Yo tampoco lo sé. :
ctx.linewidth = 10;
ctx.StrokeStyle = 'RGBA (255,0,0,0.5)';
El código anterior establece el ancho de línea en 10px, y el color de la línea se vuelve rojo translúcido.
Como se muestra en la Figura 1, refresca, ¡parece que algo está mal! ¿Por qué parece que falta una pequeña pieza en la esquina superior izquierda? Esto no es una ilusión. La razón comienza con la forma en que el dibujo de la línea de lona.
Pregunta: Si el camino del rectángulo que dibujo es de 100 en ancho y altura, y mi ancho de línea de borde es de 10 px, ¿cuál es el ancho y la altura general de este rectángulo con el borde dibujado? ¿Es 100+10*2 = 120?
Si el borde se dibuja completamente fuera del camino, entonces es 120. Pero el lienzo no lo es. Las líneas en el lienzo tienen una línea media, que se encuentra en el medio absoluto de la línea, y los trazos de la línea se extienden a ambos lados con la línea media. Por ejemplo, si su ancho de línea es 1, entonces la línea central está en 0.5; Si el ancho es 5, entonces la línea central está en 2.5. Cuando la figura del lienzo se acaricia, la ruta se ajusta a la línea media de la línea y luego acaba. Como se muestra en la Figura 2:
Por lo tanto, cuando se acaricia, la mitad de la línea está en el exterior y la mitad está en el interior, es decir, el ancho general del rectángulo superior es más de 100 (10/2)*2, que es igual a 110.
Es precisamente por esta razón que es natural tener una esquina faltante en la esquina superior izquierda. Porque nadie lo pintó aquí.
Pero, ¿por qué no hay huecos en las esquinas restantes? Mira tu foto, ¿no hay huecos en las cuatro esquinas?
Eso es porque no levanté el cepillo durante el dibujo de líneas, y los pinceles eran continuos, es decir, no me movía antes. Si no lo crees, Moveto ahora:
CTX.moveto (100,100);
CTX.Lineto (200,100);
CTX.Moveto (200,100); // nota aquí
CTX.Lineto (200,200);
CTX.Lineto (100,200);
CTX.Lineto (100,100);
ctx.linewidth = 10;
ctx.StrokeStyle = 'RGBA (255,0,0,0.5)';
ctx.stroke ();
Nos movimos antes de dibujar la segunda línea, y las coordenadas del Moveto no han cambiado, y sigue siendo el mismo punto, pero después de refrescarse, la figura se vuelve así [Figura 3]:
¿Comprendido? Porque levantamos la pluma.
Ahora eliminemos a Moveto, no te preocupes por eso, pensemos en cómo llenar la esquina que falta en la esquina superior izquierda.
Primero, déjame hacer una pregunta, ¿está cerrado nuestro camino? ¿No es esta tontería? ¿No hemos vuelto el camino hacia el origen? ¡Por supuesto que está cerrado!
¡equivocado! Esto solo hace que el último punto de la ruta se superponga con el punto de partida, ¡pero el camino en sí no está cerrado!
¿Cómo cerrar el camino en el lienzo? Use ClosePath ().
CTX.moveto (100,100);
CTX.Lineto (200,100);
CTX.Lineto (200,200);
CTX.Lineto (100,200);
CTX.Lineto (100,100);
CTX.ClosePath (); // Cerrar ruta
ctx.linewidth = 10;
ctx.StrokeStyle = 'RGBA (255,0,0,0.5)';
ctx.stroke ();
Refrescante en este momento te hará un cuadrado perfecto. Figura 4:
No importa cuán gruesos cambiemos las líneas, cuanto más gruesa, más personas les gustan, ¿verdad? -Las cuatro esquinas de este cuadrado son ángulos rectos regulares y no serán suaves. ¿Cuál es el caso con una esquina suave? Consulte el trazo cuadrado en PS, Figura 5:
Lo vi. Cuanto más grueso sea el borde, más grande es el arco de su angular.
Si creo que las líneas de borde en el lienzo son las mismas que las de PS, ¿hay alguna forma? Por supuesto, está el atributo Linejoin.
LineJoin, que significa la intersección de líneas, tiene 3 propiedades: MITER (predeterminada, esquina nítida), bisel (bisel) y redondo (redondo), como se muestra en la Figura 6:
No hay duda de que podemos entender que nuestro rectángulo usa esquinas afiladas, así que intente cambiarlo a esquinas redondeadas:
Los gráficos se volvieron así, Figura 7:
Es un poco como PS, ¿verdad?
Además, desde la imagen anterior aprendimos que los dos extremos de la línea de lienzo son planos, ¿se puede cambiar? Después de todo, no es guapo.
También es posible, es decir, la propiedad Linecap, que es el punto final que define la línea. Linecap tiene 3 valores: trasero (plano, predeterminado), redondo (círculo), cuadrado (cuadrado), como se muestra en la Figura 8
Puede encontrar que la cabeza plana es en realidad la misma que la cabeza cuadrada, la única diferencia es que la cabeza plana no se estira. Tanto la cabeza redonda como la cabeza cuadrada se estiran en una pieza. ¿Cuánto tiempo dura esta sección? Eso es la mitad del ancho de la línea.
¿Alguna vez has pensado en algo? Jaja, el problema anterior de la ruta cerrada, si establecemos Linecap como encabezado cuadrado, ¡el efecto será el mismo!
Pero para estar seguro, todavía tenemos que cerrar el camino, ¡recuerda!
También quiero recordarles: ¡la ruta cerrada no tiene puntos finales! Entonces, el estilo del punto final no es visible en la ruta cerrada.
Además : Linecap es un poco similar a Linejoin, tenga cuidado de no perder el tiempo.Si tiene los ojos afilados y tiene mala suerte, puede encontrar que a veces las líneas de 1 píxel no tienen 1 píxeles de ancho, pero parecen ser más amplias y borrosas. Como se muestra en la Figura 9:
¡Felicidades! Encontraste un error que no era un error. Esto es muy especial, lo pondré en el próximo artículo.