Comentario: Canvas significa lienzo. El lienzo en HTML5 es realmente muy similar al lienzo en la vida real. Por lo tanto, tratarlo como un lienzo real puede acelerar la comprensión; Si desea aprender el dibujo de lienzo, debe tener una base JavaScript. No diré mucho, llega al grano.
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.
Es necesario mencionar las características de este lienzo. Tiene dos propiedades nativas, 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.
¿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 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'); 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á 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.
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...
Algunos conocimientos básicos sobre el dibujo
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, lo comprenderá naturalmente durante el proceso de aprendizaje.
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.