This article mainly introduces a tutorial on using Canvas in HTML5 to draw particle motion with formulas, and requires Javascript code as a formula. Friends who need it can refer to it
Recently I want to make a web page and put some of the DEMOs I did in the process of learning HTML5 to make collections. However, if I just make a web page and arrange all the DEMOs one by one, it will feel too ugly. I just thought, since I have learned canvas, let’s mess with the browser and make a small opening animation.
I thought about the effect of the opening animation for a while and decided to use particles because I thought particles were more fun. I still remember the first technical blog post I wrote before, which was about particle-like text images: particle-like text images, and then I only did linear motion, and added a little 3D effect. The movement formula is simple. So I just want to make this opening animation more dynamic.
Go to DEMO first: http://2.axescanvas.sinaapp.com/demoHome/index.html
Is the effect more dynamic than straight line movement? And it is indeed very simple. Don’t forget the title of this blog post, the small formula, and the great fun. To achieve such an effect, we only use junior high school. . Or the physics knowledge in high school, the formula for accelerating movement and decelerating movement. So it is indeed a small formula. The poster likes to mess with some cool things. Although it may not be useful at work, this fun is really fascinating. Moreover, doing these can also enhance your programming thinking ability.
Without further ado, I'm going to the topic. Just briefly explain the principle~~~
The core code of particle motion is just this:
XML/HTML Code Copy content to clipboard