Tutorial de dibujo de lona HTML5 (1) - Conocimientos básicos del dibujo

Aunque todos llaman a Canvas una nueva etiqueta para HTML5/"> HTML5, parece que el lienzo pertenece al nuevo conocimiento del lenguaje HTML, pero de hecho, el dibujo de lienzo se realiza a través de JavaScript. Por lo tanto, si desea aprender el dibujo de lona, ​​debe tener una base JavaScript.

Además, al dibujar imágenes, siempre hay algunos términos y puntos de conocimiento en las imágenes, por lo que si tiene experiencia en hacer fotos o arte, será más fácil aprender lienzos.

Lienzo significa lienzo. El lienzo en HTML5 es realmente muy similar al lienzo en la vida real. Entonces, verlo como un lienzo tangible puede acelerar la comprensión.

Para dibujar con lienzo, en primer lugar, debe tener un lienzo. Si no tiene un lienzo en su estantería, puede comprar un rollo y ponerlo. Por supuesto, no necesitamos gastar dinero en la página web, simplemente escriba un lienzo, similar a:

<Canvas id = "cvs"> Su navegador no admite Canvas </able>

El texto en la etiqueta es para navegadores que no admiten el lienzo, y los apoyados nunca serán visibles.

Es necesario mencionar las características de este lienzo. Tiene dos atributos nativos, a saber, ancho y altura. Al mismo tiempo, debido a que también es un elemento HTML, también puede usar CSS para definir el ancho y la altura. Sin embargo, asegúrese de prestar atención: ¡su propio ancho y altura son diferentes del ancho y la altura definidas a través de CSS!

Usamos JS para cambiar el ancho y la altura del lienzo, así:

Canvas.Width = 400

Canvas.Height = 300

Pero usando JS para cambiar el ancho y la altura del lienzo operando CSS, es así:

Canvas.style.width = '400px'

Canvas.style.height = '300px'

Se puede ver que la diferencia gramatical es muy obvia. De hecho, la diferencia es más obvia.

Por ejemplo, para un lienzo de 1000 de ancho, dibuja una línea vertical en el lado izquierdo del lienzo, de 100 píxeles de ancho. En este momento, establece el ancho del lienzo en 500, que es equivalente a hacer clic en la mitad derecha del lienzo, pero en este momento el ancho de la línea vertical sigue siendo 100.

Pero si usa CSS para cambiar el ancho del lienzo a 500, es equivalente a extruir el lienzo de 1000 a 500, por lo que el ancho de la línea vertical se convierte en 50.

(Esta es solo una situación teórica. Al establecer el ancho del lienzo, borrará el contenido dibujado).

El ancho y la altura del lienzo son atributos del lienzo en sí, y el ancho y la altura dados por CSS pueden considerarse como una escala. Si escala demasiado casualmente, los gráficos en el lienzo pueden volverse irreconocibles para usted.

Por lo tanto, hay una sugerencia: a menos que en circunstancias especiales, no use CSS para definir el ancho y la altura del lienzo.

El lienzo lo tiene, y ahora lo sacamos:

var cvs = document.getElementById ('cvs');

Mira, es exactamente lo mismo que obtener otros elementos.

Ahora que el lienzo está disponible, quiero garabatearlo en él, por supuesto que también necesito un bolígrafo. El método para obtener un bolígrafo es el siguiente:

var ctx = cvs.getContext ('2d'); Donde se usa el método GetContext para sostener un bolígrafo, pero hay otro parámetro aquí: 2d. ¿Qué quiere decir esto? Esto puede considerarse como un tipo de cepillo.

Como hay 2D, ¿habrá 3D? Probablemente habrá en el futuro, pero no ahora. Así que primero usemos este bolígrafo 2d.

Entonces, ¿podemos poner algunos bolígrafos más de sobra? La respuesta es no.

Quiero hacer una pregunta: ¿cuántos bolígrafos usas al mismo tiempo al dibujar imágenes? Creo que el 99.9% de las personas solo pueden usar una. Aunque algunos maestros de artes marciales como Xiaolongnu pueden dibujar con ambas manos al mismo tiempo, esto es muy poco realista para la gente común, ¿verdad?

¡Así que ahora puede sentirse aliviado porque la etiqueta de lona HTML5 también solo admite usar un bolígrafo al mismo tiempo!

Algunos estudiantes que están familiarizados con JS pueden querer ser inteligentes: uso el método para obtener el cepillo de la manera anterior para obtener algunos bolígrafos más, ¿no sería suficiente? !

Por ejemplo:

var con = cvs.getContext ('2d');

var ctx = cvs.getContext ('2d');

Jajaja, parece tener éxito. Pensé que antes de la prueba, pero de hecho, ¡esto es solo una ilusión!

¡Porque descubrí que sumergí uno de los bolígrafos en tinta roja, y el otro bolígrafo también se sumergió automáticamente en tinta roja! ¡Porque los dos bolígrafos son uno! Mierda.

Si necesita dibujar diferentes colores, la forma es seguir sumergiendo este bolígrafo único en un nuevo color.

En realidad, esto no es una ventaja, es un defecto, lo experimentarás en el futuro.

El mundo 2d es un avión. Para determinar un punto en un plano, se requieren dos valores, coordenadas X y coordenadas y. Este es un concepto básico muy importante.

El origen del lienzo es la esquina superior izquierda, lo mismo que Flash. Pero lo que es tan molesto es que el origen en las matemáticas es la esquina inferior izquierda. Este...

En primer lugar, debe saber qué tipo de cambios de coordenadas dibujarán ¿qué líneas? Por ejemplo, si la coordenada x se hace más grande y la coordenada y permanece sin cambios, se puede dibujar una línea horizontal; Si la coordenada Y cambia pero la coordenada X permanece sin cambios, se puede dibujar una línea vertical.

Por supuesto, también hay líneas diagonales, líneas diagonales izquierdas y líneas diagonales derechas. Si puede comparar las imágenes, la mayoría de las personas pueden entenderlas a la vez; Es más deprimente dibujar con código, y solo puede pensar en ello a través del pensamiento lógico.

Si ahora se siente confundido acerca de las líneas, no se preocupe, las comprenderá naturalmente durante el proceso de aprendizaje.

El lienzo tiene una característica diferente del lienzo real, que es que es transparente de forma predeterminada y no tiene color de fondo. Esto es muy importante la mayor parte del tiempo.