Canvas, l'interface la plus puissante du H5, réalise des fonctions graphiques dynamiques

Dans le dernier article, nous avons expliqué comment utiliser Canvas pour dessiner des graphiques, mais les dessins étaient tous des graphiques statiques. Cette semaine, nous allons apprendre à utiliser Canvas pour dessiner des graphiques dynamiques.

Avant de dessiner une animation, nous devons comprendre ce qu’est une animation. Quelles sont les conditions de base minimales requises pour une animation ?

Que pouvons-nous utiliser comme outil pour montrer une animation ?

Il s'agit d'un effet d'animation dessiné en utilisant PPT

D'après l'effet d'animation dessiné par le PPT ci-dessus, nous pouvons voir que lorsque vous basculez rapidement entre plusieurs pages PPT, vous verrez un effet d'animation.

C'est l'élément de base de la mise en œuvre de l'animation :

Lisez plusieurs images en continu par unité de temps. Cette unité de temps est généralement mesurée en secondes. Afin d'obtenir une vidéo suffisamment fluide dans les graphiques rendus par ordinateur, le nombre d'images par seconde doit être supérieur ou égal au taux de rafraîchissement du moniteur (ce taux de rafraîchissement est généralement de 60 Hz).

L'état des objets dans chaque image (taille, forme, couleur, position, angle, etc.) doit changer

Alors, comment implémenter ces deux conditions dans Canvas ?

Nous pouvons transformer cela en dessinant un graphique tous les 1/60 s. En JavaScript, si nous voulons faire quelque chose de temps en temps, la méthode que nous utilisons consiste à utiliser le timer setinterval.

setinerval（function f(){}，t）， deux paramètres peuvent être passés dans le timer, l'un est la fonction et l'autre est le temps. La signification de ce code est d'exécuter la fonction f toutes les t ms.

Ensuite, nous utilisons cela pour obtenir ce dont nous avons besoin : dessiner un graphique tous les 1/60 s.

 setInterval(function(){canCon.fillStyle=black;//canCon.fill signifie prendre un stylo pour dessiner des graphiques solides sur ce papier de riz, //style=black signifie le tremper dans de l'encre noire//en continu Pour regarder il suffit de prendre un stylo pour dessiner des graphiques solides et de le coller avec de l'encre noire canCon.arc(233,233,66,0,Math.PI*2); //Envisagez de dessiner un cercle sur la feuille de riz (la position X du centre, la position Y, le rayon du cercle, où commencer à dessiner le cercle et où terminer canCon.fill( //Last); trait pour dessiner},1000/60 )

effet final

Mais il n'y a pas encore d'effet d'animation, car les 60 graphiques dessinés en 1 seconde sont tous exactement les mêmes, donc l'état de l'élément doit être modifié lorsque chaque graphique est dessiné.

Au fait, je voudrais vous recommander une jupe. Le devant est 537, le milieu est 631 et le dernier est 707. Les amis qui souhaitent apprendre le front-end peuvent nous rejoindre pour apprendre ensemble et s'entraider. Il y a des maîtres dans le groupe qui donnent des cours gratuits en direct tous les soirs. Si vous ne voulez pas apprendre, ne vous joignez pas.

(537-631-707)

Comment changer l'état d'un élément ?

La position d'un cercle est déterminée par les coordonnées du centre du cercle, nous pouvons donc changer la position de l'élément à chaque fois que nous dessinons le canevas.

 vari=100;//Donnez une position centrale initiale du cercle, et la position y du centre du cercle se déplacera vers le bas d'une distance à chaque fois qu'il est dessiné setInterval(function(){canCon.fillStyle=black;// canCon.fill signifie prendre un stylo pour dessiner des formes solides sur ce papier de riz, //style=black signifie le tremper dedans Une encre noire //Pour le connecter, vous devez prendre un stylo pour dessiner des graphiques solides et le coller avec de l'encre noire canCon.arc(233,y++,66,0,Math.PI*2);//Sur le riz paper Concevoir et dessiner un cercle (la position X du centre du cercle, la position Y, le rayon du cercle, où commencer à dessiner le cercle et où terminer canCon.fill();//Dernier trait); dessiner},1000/60)

Ce que nous voyons à ce moment-là n’est pas un cercle en mouvement, mais plutôt une barre de progression qui s’étend. La raison est en fait très simple : nous n’effaçons pas le graphique original à chaque fois que nous dessinons un nouveau graphique. Une telle image est le résultat de n multiples graphiques superposés. Ainsi, chaque fois que nous dessinons un nouveau graphique, nous devons effacer l’original. Alors, comment faire ?

 vari=100;//Donnez une position centrale initiale du cercle, et la position y du centre du cercle se déplacera vers le bas d'une distance à chaque fois qu'il est dessiné setInterval(function(){canCon.clearRect(0, 0, 500, 500);/ /Effacer les coordonnées du coin supérieur gauche d'une zone rectangulaire ainsi que la largeur et la hauteur du rectangle canCon.fillStyle=black;//canCon.fill signifie ramasser une peinture sur ce papier de riz Un stylo avec des graphiques solides, //style=black signifie le tremper dans de l'encre noire //Pour l'assembler, cela signifie prendre un stylo qui dessine des graphiques solides et le coller avec de l'encre noire canCon.arc(233,y++,66 , 0,M ath.PI*2);//Envisagez de dessiner un cercle sur du papier de riz (position X du centre du cercle, position Y, rayon du cercle, où commencer à dessiner le cercle et où terminer canCon.fill() ; );// Commencer à peindre},1000/60)

Mais cela n’a toujours aucun effet pour le moment, alors que se passe-t-il exactement ? Nous pouvons repenser à la scène de notre enfance lorsque nous peignions. Lorsque nous effaçons une certaine zone sur le papier à dessin, devons-nous d'abord soulever le pinceau pour pouvoir utiliser la gomme pour effacer certaines zones du papier, nous devons donc lever le stylo avant d'effacer une zone de la toile.

 vari=100;//Donnez une position centrale initiale du cercle, et la position y du centre du cercle se déplacera vers le bas d'une distance à chaque fois qu'il est dessiné setInterval(function(){canCon.beginPath();// Soulevez le stylo canCon. clearRect(0, 0, 500, 500); // Efface les coordonnées du coin supérieur gauche d'une zone rectangulaire et les coordonnées du rectangle. Largeur et hauteur canCon.fillStyle=black;//canCon.fill signifie prendre un stylo pour dessiner des graphiques solides sur ce papier de riz, //style=black signifie le tremper dans une encre noire//Si vous le regardez ensemble , c'est Prenez un stylo pour dessiner des formes solides et collez-le avec de l'encre noire canCon.arc(233,y++,66,0,Math.PI*2); //Envisagez de dessiner un cercle sur la feuille de riz (la position X du centre, la position Y, le rayon du cercle, où commencer à dessiner le cercle et où terminer canCon.fill( //Last); trait pour dessiner},1000/60 )

De cette façon, nous pouvons obtenir un cercle mobile

Ce qui précède est l'introduction de l'éditeur à l'interface la plus puissante de H5, Canvas, pour implémenter des fonctions graphiques dynamiques. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !