Canvas, la interfaz más potente de H5, realiza funciones gráficas dinámicas

En el último artículo, compartimos cómo usar el lienzo para dibujar gráficos, pero todos los dibujos eran gráficos estáticos. Esta semana aprenderemos a usar el lienzo para dibujar gráficos dinámicos.

Antes de dibujar una animación, debemos entender qué es la animación. ¿Cuáles son las condiciones básicas mínimas requeridas para una animación?

¿Qué podemos utilizar como herramienta para mostrar animación?

Este es un efecto de animación dibujado usando PPT.

De acuerdo con el efecto de animación dibujado por el PPT anterior, podemos ver que cuando cambia rápidamente entre varias páginas PPT, verá un efecto de animación.

Este es el elemento básico de la implementación de la animación:

Reproduzca varias imágenes continuamente por unidad de tiempo. Esta unidad de tiempo generalmente se mide en segundos. Para obtener un video lo suficientemente fluido en gráficos renderizados por computadora, la cantidad de imágenes por segundo debe ser mayor o igual a la frecuencia de actualización del monitor (esta frecuencia de actualización es generalmente de 60 Hz).

El estado de los objetos en cada imagen (tamaño, forma, color, posición, ángulo, etc.) debe cambiar.

Entonces, ¿cómo implementamos estas dos condiciones en el lienzo?

Podemos transformar esto dibujando una gráfica cada 1/60s. En JavaScript, si queremos hacer algo de vez en cuando, el método que utilizamos es utilizar el temporizador setinterval.

setinerval（function f(){}，t）， se pueden pasar dos parámetros al temporizador, uno es la función y el otro es el tiempo. El significado de este código es ejecutar la función f cada t ms.

Luego usamos esto para lograr lo que necesitamos para dibujar un gráfico cada 1/60s.

 setInterval(function(){canCon.fillStyle=black;//canCon.fill significa tomar un bolígrafo para dibujar gráficos sólidos en este papel de arroz, //style=black significa sumergirlo en tinta negra//continuamente Para mirar Para ello, simplemente toma un bolígrafo para dibujar gráficos sólidos y pégalo con tinta negra canCon.arc(233,233,66,0,Math.PI*2); //Considere dibujar un círculo en el papel de arroz (la posición X del centro, la posición Y, el radio del círculo, dónde comenzar a dibujar el círculo y dónde terminar canCon.fill(); trazo para dibujar},1000/60)

efecto final

Pero aún no hay efecto de animación, porque los 60 gráficos dibujados en 1 segundo son todos exactamente iguales, por lo que el estado del elemento debe cambiarse cuando se dibuja cada gráfico.

Por cierto, me gustaría recomendarte una falda. La delantera es 537, la del medio 631 y la última es 707. Los amigos que quieran aprender front-end pueden unirse a nosotros para aprender juntos y ayudarse unos a otros. Hay maestros en el grupo que dan clases gratuitas en vivo todas las noches. Si no quieres aprender, no te unas.

(537-631-707)

¿Cómo cambiar el estado de un elemento?

La posición de un círculo está determinada por las coordenadas del centro del círculo, por lo que podemos cambiar la posición del elemento cada vez que dibujamos el lienzo.

 varia=100;//Proporcione una posición central inicial del círculo, y la posición y del centro del círculo se moverá hacia abajo una distancia cada vez que se dibuje setInterval(function(){canCon.fillStyle=black;// canCon.fill significa tomar un bolígrafo para dibujar formas sólidas en este papel de arroz, //style=black significa sumergirlo en Una tinta negra //Para conectarlo, debes tomar un bolígrafo para dibujar gráficos sólidos y pegarlo con tinta negra canCon.arc(233,y++,66,0,Math.PI*2);//En el arroz paper Concibe y dibuja un círculo (la posición X del centro del círculo, la posición Y, el radio del círculo, dónde comenzar a dibujar el círculo y dónde terminar canCon.fill();//Último trazo); dibujar},1000/60)

Lo que vemos en este momento no es un círculo en movimiento, sino más bien una barra de progreso que se extiende. La razón es realmente muy simple. No borramos el gráfico original cada vez que dibujamos un gráfico nuevo. Dicha imagen es el resultado de n múltiples gráficos superpuestos. Entonces, cada vez que dibujamos un gráfico nuevo, tenemos que borrar el original. Entonces, ¿cómo hacerlo?

 varia=100;//Da una posición central inicial del círculo, y la posición y del centro del círculo se moverá hacia abajo una distancia cada vez que se dibuje setInterval(function(){canCon.clearRect(0, 0, 500, 500);/ /Borra las coordenadas de la esquina superior izquierda de un área rectangular y el ancho y alto del rectángulo canCon.fillStyle=black;//canCon.fill significa recoger una pintura en este papel de arroz Un bolígrafo con gráficos sólidos, //style=black significa sumergirlo en tinta negra //Para armarlo, significa tomar un bolígrafo que dibuja gráficos sólidos y pegarlo con tinta negra canCon.arc(233,y++,66, 0,M ath.PI*2);//Considere dibujar un círculo en papel de arroz (posición X del centro del círculo, posición Y, radio del círculo, dónde comenzar a dibujar el círculo y dónde terminar); );// Empezar a pintar},1000/60)

Pero todavía no tiene ningún efecto en este momento, entonces, ¿qué está pasando exactamente? Podemos recordar la escena cuando éramos niños cuando estábamos pintando. Al borrar un área determinada en el papel de dibujo, ¿necesitamos levantar el pincel primero para poder usar el borrador para borrar ciertas áreas en el papel? entonces tenemos que levantar el bolígrafo antes de borrar un área del lienzo.

 varia=100;//Proporcione una posición central inicial del círculo, y la posición y del centro del círculo se moverá hacia abajo una distancia cada vez que se dibuje setInterval(function(){canCon.beginPath();// Levanta el bolígrafo canCon. clearRect(0, 0, 500, 500); // Borra las coordenadas de la esquina superior izquierda de un área rectangular y las coordenadas del rectángulo. Ancho y alto canCon.fillStyle=black;//canCon.fill significa tomar un bolígrafo para dibujar gráficos sólidos en este papel de arroz, //style=black significa sumergirlo en tinta negra//Si lo miran juntos , es Coge un bolígrafo para dibujar formas sólidas y pégalo con tinta negra canCon.arc(233,y++,66,0,Math.PI*2); //Considere dibujar un círculo en el papel de arroz (la posición X del centro, la posición Y, el radio del círculo, dónde comenzar a dibujar el círculo y dónde terminar canCon.fill(); trazo para dibujar},1000/60)

De esta manera podemos obtener un círculo en movimiento.

Lo anterior es la introducción del editor a la interfaz más potente de H5, el lienzo, para implementar funciones de gráficos dinámicos. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!