Cómo dibujar varias formas con lienzo
Usar lienzo
Dicho todo lo anterior, ¿qué es el lienzo?
Canvas significa "canvas" en inglés, pero el Canvas mencionado aquí es un elemento nuevo en HTML5, en el que los desarrolladores pueden dibujar una serie de gráficos. Canvas se escribe simplemente en archivos HTML:
ltcanvas id = " canvas " width = " width " height = " height " > lt;/canvas gt
Entre ellos, el id El atributo puede ser utilizado por todos los elementos HTML, el lienzo tiene solo las dos últimas propiedades (que controlan el ancho y el alto respectivamente) y nada más. En cuanto a la compatibilidad, CanIUse dijo que el 90% de los navegadores utilizados actualmente por los usuarios admiten funciones básicas, por lo que se pueden utilizar con confianza en la mayoría de los casos.
Asegúrese de utilizar los atributos de ancho y alto que vienen con el lienzo y no utilice el control CSS, porque el control CSS hará que el lienzo se deforme. Puedes intentar compararlo con PhptpShop. Este último cambia el "tamaño de la imagen", mientras que el primero cambia el "tamaño del lienzo" correctamente. Por ejemplo, la imagen a continuación es una unión horizontal de tres imágenes: el cuadro negro más a la izquierda contiene la imagen original con un tamaño de 50 px * 50 px, el tamaño de la imagen del medio se cambia a 100 px * 100 px y la imagen se vuelve borrosa, pero el rango de coordenadas es de 100 px * 100 px. la imagen en sí no está ampliada; en el extremo derecho está el lienzo correcto de 100 px * 100 px.
La mayoría de los métodos de dibujo del lienzo son los mismos que
Primero obtenemos este elemento:
var canvas = document . /p>
Luego obtenga una entrada que pueda llamar a todas las API de Canvas a través de un método:
var CTX = canvas get context(' 2d ');
Lo estará. emocionado de ver 2d ¿Estás pensando en 3D? No existe un método de escritura 3D, pero si desea abrir la puerta al mundo 3D, puede escribir canvas.getContext('webgl '). Sin embargo, WebGL es un conjunto de estándares basados en OpenGL ES 2.0, que es completamente diferente de este artículo y no se discutirá aquí.
Conceptos básicos en lienzo
Coordenadas
A diferencia del sistema de coordenadas cartesiano común en matemáticas, el sistema de coordenadas de lienzo es un sistema de coordenadas común en las computadoras. se ve así:
La esquina superior izquierda del lienzo es (0, 0), aumenta hacia la derecha con X y disminuye con Y, y tanto X como Y son números enteros (incluso si no son números enteros durante el cálculo, también se trata como un número entero al dibujar), en píxeles.
Redacción
Llévate a todos los nostálgicos. No sé cuántos compañeros han jugado con el lenguaje de los logotipos cuando eran jóvenes. En el interior, puedes controlar una pequeña tortuga para caminar, dibujar, escribir y escribir y escribir en una pizarra. Lo mismo ocurre con el lienzo. Necesitas controlar el movimiento y el dibujo del pincel. Sin embargo, Canvas es más avanzado.
Puedes usar algunas funciones para dibujar directamente sin controlar la posición del pincel.
Gráficos básicos en el lienzo
Se pueden hacer muchas cosas interesantes con la variable ctx definida anteriormente. Primero veamos cómo dibujar algunas formas básicas.
Línea
Especificamos que el pincel se mueva a un punto determinado y luego le indicamos al pincel que dibuje desde el punto actual a otro punto. Podemos hacer que el pincel se mueva y dibuje varias veces y finalmente mostrarlo en la pantalla. Los ejemplos son los siguientes:
ctx.moveTo(10, 10);
ctx.lineTo(150, 50);
ctx.lineTo(10, 50) ;
ctx.moveTo(10,20);
ctx.lineTo(40,70);
CTX . p>
En el código anterior, lineTo es una función utilizada para generar líneas. Después de la ejecución, el pincel se mueve hasta el final de la línea. Cabe señalar que la línea no se muestra en la pantalla en este momento y solo se mostrará cuando se llame al trazo. Este diseño tiene sentido porque enviar contenido a la pantalla requiere muchos recursos. Primero podemos guardar suficientes líneas y finalmente dibujar una grande con un bolígrafo.
Carretera pequeña
Dibujar un camino es muy simple. Primero, dígale a ctx "Voy a comenzar a dibujar un camino" y luego use varios métodos (como lineTo) para dibujar el camino. camino. Si necesita dibujar un camino cerrado, finalmente dígale a ctx: "Ya terminé, puede cerrarlo". Por supuesto, no olvide usar un trazo para mostrarlo en la pantalla.
Un ejemplo simple:
CTX .comenzar ruta();
ctx.moveTo(10, 10); lineTo(150, 50);
ctx.lineTo(10, 50);
CTX . cerrar ruta();
CTX ;
¿Qué pasa si en lugar de simplemente dibujar líneas de camino, quiero llenar todo el camino? Puedes cambiar el trazo de la última línea a un relleno para que el contenido del trazado cerrado se llene de color, como si usaras un cubo de pintura en tu dibujo:
CTX .fill();
Arco/Círculo
Hay muchos parámetros de función para dibujar arcos:
Ctx.arc (coordenada centro x, coordenada centro y, radio, ángulo inicial, ángulo final , ya sea en sentido antihorario);
Tenga en cuenta que en el sistema de coordenadas de Canvas, un lado del ángulo es una línea recta horizontal hacia la derecha con el centro del círculo como centro. El ángulo se mide en radianes. Por ejemplo, como se muestra en la figura siguiente, determine el centro del círculo, el ángulo inicial (el ángulo agudo que se muestra en la figura) y el ángulo final (el ángulo obtuso que se muestra en la figura). es tal arco. Si la dirección es en el sentido de las agujas del reloj, será un arco muy, muy grande que es complementario a él...
Así que si lo giras 2π veces, el arco se convierte en un círculo, por lo que también puedes dibujar un arco:
CTX .begin path();
Ctx.arc(centro x coordenada, centro y coordenada, radio, 0, matemáticas. PI * 2, verdadero);
p>CTX . close path();
El último parámetro se puede completar de manera casual (o no completar, por supuesto), porque después de una rotación de 2π, es un círculo. , ya sea en el sentido de las agujas del reloj o en el sentido contrario a las agujas del reloj.
Rectángulo
Si solo quieres dibujar un rectángulo horizontal y vertical, puedes utilizar los dos métodos siguientes:
//Solo trazos
Ctx.strokeRect(coordenada X de la esquina superior izquierda, coordenada Y de la esquina superior izquierda, ancho, alto);
//Rellenar solo
Ctx.fillRect(coordenada X de la esquina superior izquierda, esquina superior izquierda, coordenada Y de la esquina, ancho, alto);
Estilo de línea/estilo de relleno
Los gráficos dibujados antes eran todos negros, pero Canvas definitivamente tiene más de un color (de lo contrario, el fijador estándar se rociará mal). De hecho, Canvas puede establecer el estilo de línea y el estilo de relleno respectivamente, utilizando el estilo de trazo y el estilo de relleno respectivamente. Hay tres valores posibles: color sólido, degradado e imagen. Dado que el uso del estilo de línea y el estilo de relleno son los mismos, tomaremos el estilo de relleno como ejemplo. Si desea establecer el estilo de línea, simplemente cambie todos los estilos de relleno a estilos de trazo y los parámetros internos permanecerán sin cambios.
/*Relleno de color sólido*/
//Color normal
CTX . //Color transparente
ctx.fillStyle = 'rgba(64, 0, 127, 0.5)';
/*Relleno degradado*/
// Configuración El tamaño del gradiente (los parámetros son xey para el punto inicial y xey para el punto final respectivamente).
var gradient = CTX . createlineargradient(0, 0, 170, 0);
//Establece el color de transición. El primer parámetro es la posición del degradado y el segundo parámetro es el color.
gradient.addColorStop(0,'magenta');
gradient.addColorStop(0.5,'blue');
gradient.addcolorstop(1.0, ' Red');
//Establece el estilo de relleno
ctx.fillStyle = gradient
/*Relleno de imagen*/
/ /Crear imagen
var imagen = nueva imagen;
image src = '/ruta/a/imagen .png';
//Crear una imagen. Las pinceladas pueden especificar el método de mosaico de la imagen, aquí es mosaico horizontal.
var patrón = CTX . crear patrón(imagen, ' repetir-x ');
//Establecer relleno de trazo
ctx.fillStyle = patrón
p>
p>
Con respecto al gradiente, además del gradiente lineal mencionado en el código, también existe createRadialGradient, que es un gradiente radial.
Después de configurar el estilo de relleno, ¡puedes usar relleno para rellenarlo! Si se establece un estilo de línea, puede utilizar trazo a trazo.
Por supuesto, para los estilos de línea, existe un método adicional llamado lineWidth, que se puede utilizar para controlar el ancho de la línea.
Características
Si desea dibujar texto en el lienzo, primero necesita saber la fuente y el tamaño de fuente utilizado:
ctx.font = ' 30px Verdana
Luego puedes trazar o rellenar la fuente mediante trazoTexto o rellenoTexto.
ctx.strokeText("¡Hola codificación!", 23, 33);
ctx.fillText("¡Hola codificación!", 23, 66);
Dibujar
Hay tres formas de dibujar en el lienzo:
//Especificar la posición del dibujo
ctx.drawImage(image, x, y);
//Especifique la posición del dibujo
ctx.drawImage(image, x, y);
p>//Especifique la posición del dibujo y el ancho de la imagen y altura.
ctx.drawImage(image, x, y, width, height);
//Especifique el área de recorte, la posición del dibujo y el ancho y alto de la imagen.
ctx.drawImage(image, sx, sy, ancho, altura, x, y, ancho, alto
El significado de estos parámetros es el siguiente:
Imagen: La imagen, lienzo o vídeo a utilizar.
Sx: Opcional, coordenada x para empezar a cortar.
Sy: Opcional, la coordenada y para empezar a cortar.
Ancho: Opcional, el ancho de la imagen recortada.
la altura: Opcional, la altura de la imagen recortada.
x: La coordenada x de la imagen colocada en el lienzo.
La coordenada Y:Y de la imagen colocada en el lienzo.
Ancho: Opcional, el ancho de la imagen a utilizar.
Alto: Opcional, el alto de la imagen a utilizar.
Configuración del lienzo
Los estudiantes cuidadosos pueden encontrar que algunas propiedades se configuraron directamente en las variables ctx en este momento, como ctx.lineWidth. Mientras estén configuradas, las líneas dibujadas más adelante lo harán. tener este ancho.
De hecho, hay muchas configuraciones para el lienzo, por ejemplo, podemos mover el lienzo directamente, rotarlo, establecer la transparencia global del dibujo, etc. Estas configuraciones también se pueden guardar y restaurar en cualquier momento.
Una cosa a tener en cuenta es que todo lo que se ha pintado en el lienzo está muerto y no cambiará sin importar los ajustes que se realicen más adelante. Esto es muy similar al programa Paint de Windows.
Sin más preámbulos, solo el código:
//Mover el lienzo en realidad significa mover el sistema de coordenadas.
Ctx.translate (cantidad a mover hacia la derecha, cantidad a mover hacia abajo);
//Gira el lienzo con el centro de rotación como origen del sistema de coordenadas.
Ctx.rotate (ángulo de rotación en el sentido de las agujas del reloj);
//Escale el lienzo alrededor del origen del sistema de coordenadas.
Ctx.scale (zoom horizontal, zoom vertical);
//Establece la transparencia del dibujo. Si fillStyle y otros atributos establecen la transparencia, se superpondrá.
Ctx.globalAlpha (decimal de cero a uno);
//Establecer la operación compuesta global
CTX .globalcompositeoperative = 'lighter';
//Guarda la configuración actual.
CTX . save();
//Restaurar la última configuración guardada.
CTX .restore();
Mover, rotar y escalar en realidad controlan el sistema de coordenadas del dibujo. Si siempre tiene en mente un sistema de coordenadas calibrado al llamar a estos tres métodos, el efecto será muy bueno.
De hecho, la transformación de coordenadas del lienzo sigue el conocimiento de la infografía: matriz de transformación. En pocas palabras, una coordenada puede considerarse como una matriz y la transformación de las coordenadas se puede lograr multiplicando la matriz correspondiente a las coordenadas por la matriz de transformación.
Para mejorar la eficiencia del cálculo, primero podemos calcular la matriz de transformación después de combinar varias transformaciones y luego transformar directamente el sistema de coordenadas actual a través de la función de transformación, o restablecer el sistema de coordenadas al estado inicial a través de la función setTransform antes de la transformación. En cuanto al contenido de la matriz de transformación, está un poco fuera del alcance de este artículo.
La operación de combinación global es un poco como las "Opciones de fusión" en PhotoShop, y el método de implementación específico aún no se ha determinado por completo. Actualmente, los navegadores comunes tienen métodos de implementación unificados: fuente sobre, fuente superior, destino sobre, destino fuera, más ligero y xor. Se pueden encontrar comportamientos específicos en la documentación oficial de Mozilla, pero como el estándar aún no se ha determinado por completo, otros navegadores no garantizan que todos los comportamientos cumplan con los estándares de Mozilla. En términos generales, fuente over y más ligera son dos estándares comunes, y estos dos estándares son indiscutibles en la industria de los navegadores.
En cuanto a guardar y restaurar configuraciones, es un poco divertido. En primer lugar, necesitas saber algo llamado "pila".
La pila es una matriz unidimensional y solo puede operarse en una dirección. La pila está vacía al principio, por lo que podemos insertar elementos en la matriz desde esta dirección y solo sacar el último elemento (el elemento superior de la pila) de esta dirección, sin operaciones adicionales. Por supuesto, el número de estallidos no puede ser mayor que el número de empujones, porque cuando POP llega al final de la pila, no hay elementos en la pila y no tiene sentido volver a hacer POP en este momento. Stack tiene muchos usos, como coincidencia de corchetes, evaluación de expresiones, búsqueda en profundidad e incluso llamadas a funciones en la mayoría de los lenguajes que usan stack.
Cada vez que llamamos a la función de guardar, en realidad insertamos la configuración global actual en una pila especial. Cada vez que llamamos a la función de restauración, sacamos el último contenido guardado y lo usamos para sobrescribir el global actual. configuración para que la parte superior de la pila sea el último contenido guardado. Guardar y restaurar es muy útil en algunas situaciones. Por ejemplo, necesito dibujar una imagen torcida y luego continuar dibujando una imagen recta. De esta manera, puedo llamar a guardar primero, luego rotar y luego restaurar después de dibujar la imagen. Sigue dibujando otros dibujos.
De hecho, existen muchos métodos de lienzo. Por ejemplo, toDataURL convierte directamente el contenido del lienzo actual en una URL de datos hexadecimal, getImageData convierte directamente la imagen en una matriz RGBA para algoritmos de procesamiento de imágenes y putImageData convierte. la matriz RGBA muestra la imagen en Canvas y así sucesivamente. Si se acompaña de actualizaciones periódicas de JavaScript (preferiblemente usando requestAnimationFrame en lugar de setInterval), se pueden producir efectos de animación. También hay muchas bibliotecas de Canvas en Internet que pueden facilitar a los programadores escribir sus propios efectos especiales o funciones basadas en Canvas. Aquí quiero decir algo: la capacidad del lienzo es tan fuerte como el cerebro de todos ~