Cet article introduit principalement un tutoriel sur l'utilisation de Canvas dans HTML5 pour dessiner le mouvement des particules avec des formules, et nécessite du code JavaScript comme formule. Les amis qui en ont besoin peuvent y faire référence
Récemment, je veux créer une page Web et mettre certaines des démos que j'ai faites en train d'apprendre HTML5 pour faire des collections. Cependant, si je fais juste une page Web et organise toutes les démos une par une, elle sera trop laide. Je pensais juste que, depuis que j'ai appris Canvas, jouons avec le navigateur et faisons une petite animation d'ouverture.
J'ai pensé à l'effet de l'animation d'ouverture pendant un certain temps et j'ai décidé d'utiliser des particules parce que je pensais que les particules étaient plus amusantes. Je me souviens encore du premier article de blog technique que j'ai écrit auparavant, qui concernait des images de texte semblable à des particules: des images de texte en forme de particules, puis je n'ai fait que le mouvement linéaire, et j'ai ajouté un petit effet 3D. La formule de mouvement est simple. Je veux donc juste rendre cette animation d'ouverture plus dynamique.
Allez d'abord à la démo: http://2.axescanvas.sinaapp.com/demohome/index.html
L'effet est-il plus dynamique que le mouvement en ligne droite? Et c'est en effet très simple. N'oubliez pas le titre de ce billet de blog, de la petite formule et du grand plaisir. Pour réaliser un tel effet, nous n'utilisons que le lycée. . Ou les connaissances physiques au lycée, la formule pour accélérer le mouvement et la décélération du mouvement. C'est donc en effet une petite formule. L'affiche aime jouer avec des choses sympas. Bien qu'il ne soit pas utile au travail, ce plaisir est vraiment fascinant. De plus, cela peut également améliorer votre capacité de réflexion sur la programmation.
Sans plus tarder, je vais au sujet. Expliquez brièvement le principe ~~~
Le code central du mouvement des particules est juste le suivant:
CODE XML / HTML COPIE COPIRE DU PIRMOCHE