Comentario: Canvas significa lienzo. Aunque todos llaman a Canvas una nueva etiqueta para HTML5, parece que el lienzo pertenece al nuevo conocimiento del lenguaje HTML, de hecho, el dibujo de lienzo se realiza a través de JavaScript. Entonces, si desea aprender el dibujo de lienzo, debe tener una base JavaScript
Aunque todos llaman a Canvas una nueva etiqueta para HTML5, parece que el lienzo pertenece al nuevo conocimiento del lenguaje HTML, de hecho, el dibujo de lienzo se realiza a través de JavaScript. Entonces, si desea aprender el dibujo de lienzo, 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.
lienzo
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:
<VaS> Su navegador no admite lienzo </able>
El texto en la etiqueta es para navegadores que no admiten el lienzo, y los apoyados nunca serán visibles.
Nota: es necesario mencionar las características de este lienzo. Al igual que IMG, 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 ancho y altura. Sin embargo, ¡asegúrese de tener en cuenta que 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 nativos del lienzo, como este:
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.
¿Cuál es la diferencia entre ellos?
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 nativo 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.
cepillar
Ahora que el lienzo ya 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');
El método GetContext se usa para contener un bolígrafo, pero aquí hay otro parámetro: 2d. ¿Qué quiere decir esto? Esto puede considerarse como un tipo de cepillo.
Como hay 2D, ¿habrá 3D? Probablemente habrá algunos 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.
coordinar
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, pero dado que todos han aprendido las matemáticas, no hablaré mucho de eso.
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...
otro
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.