Si ha estado estudiando la web recientemente, pero ya logró ver varios efectos hermosos en el sitio, como un sistema de partículas o algunos juegos desarrollados en lienzo, estaba intrigado, pero da mucho miedo aprender algo nuevo, entonces estoy listo para demostrarle como en 50 líneas de código js puedes hacer algo interesante en canvas'e.
Diré de inmediato, quiero explicar la lógica de trabajar con el lienzo. El código es muy simple, espero que esto lo aliente a aprender herramientas como el lienzo. Esta es también una muy buena práctica para un programador principiante de JS.
Pasemos al código. Escribamos una generación simple de cuadrados de diferentes colores en el lienzo. Puede ver todo el código de una vez, luego lo explicaré.
¿Qué necesitamos hacer?
- Obtenga el lienzo y su contexto 2D (si no ha hecho esto antes, no se preocupe, esto hace 2 líneas de código)
- Hagamos que nuestro lienzo sea un poco adaptable
- Establecer las variables y propiedades que necesitamos
- Dibujando un elemento sobre lienzo
- Al cambiar el tamaño, cambie el tamaño del lienzo
El trabajo en lienzo se puede dividir en 3 etapas.
- Establecer las propiedades que necesitamos (grosor del lápiz, color de relleno, color de línea y otras propiedades)
- Dibujar un elemento
- Si hacemos algo dinámico. Por ejemplo, un juego, animación, un sistema de partículas y otros elementos, luego creamos un ciclo y colocamos el renderizado (renderizado) de nuestros objetos en él.
Bueno, volvamos a nuestro código.
1. Como dije, dos líneas de código y podemos manipular el lienzo.
Obtener un elemento por Id es la API estándar del navegador, pero getContext es un método del lienzo en sí. Puede obtener un contexto 3D, pero por el momento no lo necesitamos.
2. El segundo punto, el tercero y el quinto los uniré porque las variables se declaran + el código es el mismo aquí. Incluso puedes hacer una función separada ya que La duplicación de código ya está en marcha, lo cual es malo.
Necesitaremos más las variables ancho y alto, además, no olvide llamar a la función ReSize después de recibir el contexto del lienzo.
Necesitamos otro objeto de opciones. En él almacenaremos todas las configuraciones.
opacidad: la velocidad a la que se sobrescribirán nuestros elementos en canvas'e
cuenta: el número de cubos que crearemos en una ejecución de la función
fps: creo que no hay necesidad de explicar por qué ... la verdad es extraña ...
color: aquí se encuentra la máscara que representa nuestra paleta de colores
El tono es un tono de color en el rango de 0 a 360. La imagen será más clara
divisionSpeed es una variable con la que podemos ajustar la tasa de cambio de color
4. Todo lo que nos queda es crear un bucle, una función para renderizar, y llamarlo todo.
Creamos la función Init, es necesaria para inicializar el ciclo. Window tiene un gran método requestAniimationFrame () que le permite hacer un bucle de la llamada a la función que necesitamos. También dentro de Init, llamamos a la función Step () en la que se almacena el código para representar nuestros cubos.
Haremos renderizado en un bucle para dibujar 100 elementos a la vez. Dentro del ciclo, lo primero que hacemos es establecer una condición que nos permita elegir un tono de color en el rango de 0 a 360, por lo que los colores de nuestros cubos cambiarán. Las dos líneas siguientes se pueden combinar en una, configurando así directamente el color de relleno de la figura. ctx.fillStyle le permite establecer el color de relleno, y ctx.fillRect (punto x, punto y, ancho, alto) le permite dibujar una forma. Establecemos una altura aleatoria con un ancho, pero en el rango de nuestros tamaños.
Dos líneas después del bucle, esto es para borrar la pantalla. Ya sabe que el estilo de relleno le permite establecer el color de relleno, nosotros configuramos el color blanco con una opacidad igual a la opacidad del objeto de opciones. Y también comenzamos a dibujar la figura de limpieza desde el punto 0: 0 con dimensiones iguales a los tamaños de nuestro lienzo.
Solo podemos llamar a la función Init en cualquier parte de nuestro programa.
Si todavía duda de que puede hacer cosas hermosas con el lienzo, aquí hay un ejemplo.
Si está interesado en el lienzo, entonces es hora de continuar estudiando esta tecnología. No puedo aconsejarle sobre un buen artículo de estudio. fue muy aburrido para mí leer sobre lienzo y para mí no marqué nada bueno. Y en youtube hay muy pocos videos buenos en el lienzo, y los que se pueden ver contienen solo el 10% de la información necesaria y el 30% de agua, y el resto del tiempo escriben código con errores y lo diseñan sobre la marcha. En mi opinión, lo mejor es tomar un ejemplo simple e intentar implementarlo usted mismo.