How to Use Canvas in HTML5 to draw particle motion with formulas _ html5 tutorial skills-

This article mainly introduces how to use Canvas in HTML5 to draw particle motion based on the formula, and Javascript code as the formula. If you need a friend, refer to the previous article to get a webpage, I put some of the demos I made during the HTML5 learning process into a set. However, if I just made a web page and arranged all the demos one by one, it would be too ugly. I thought that since I learned canvas, I would like to make a small opening animation on the browser.

After thinking about the effect of the opening animation for a while, I decided to use particles because they thought they were quite fun. I still remember the first technical blog post I wrote about particle-based text images: particle-based text images. At that time, I only made linear motion and added 3D effects by the way. The formula is simple. So I want to make the opening animation more dynamic.

First DEMO: http://2.axescanvas.sinaapp.com/demoHome/index.html

Is the effect more dynamic than linear motion? And it's really easy. Don't forget the questions in this blog post. It's a great pleasure to have a little bit of formulas. To make such an effect, we only use junior high school .. Or the formula of physical knowledge, acceleration, and deceleration in high school. So it is indeed a small formula. The landlord is very fond of tossing some cool things. Although he may not be able to work at ordinary times, this pleasure is really fascinating. In addition, doing so can also enhance the Thinking Ability of programming.

Let's talk about theme. Let's briefly explain the principles ~~~

The core code of particle motion is as follows:

Copy XML/HTML Code to clipboard

1. Update: function (time ){
2. This. x + = this. vx * time;
3. This. y + = this. vy * time;
5. If (! This. globleDown & this. y> 0 ){
6. Var yc = this. toy-this. y;
7. Var xc = this. tox-this. x;
9. This. jl = Math. sqrt (xc * xc + yc * yc );
11. Var za = 20;
13. Var ax = za * (xc/this. jl ),
14. Ay = za * (yc/this. jl ),
15. Vx = (this. vx + ax * time) * 0.97,
16. Vy = (this. vy + ay * time) * 0.97;
18. This. vx = vx;
19. This. vy = vy;
21. } Else {
22. Var gravity = 9.8;
23. Var vy = this. vy + gravity * time;
25. If (this. y> canvas. height ){
26. Vy =-vy * 0.7;
27. }
29. This. vy = vy;
30. }
31. },

There are two States in total for particles: free falling and suction. Let's leave it empty. Paste the attributes of the particle before the suction:

Copy the content to the clipboard using JavaScript Code

1. Var Dot = function (x, y, vx, vy, tox, toy, color ){
2. This. x = x;
3. This. y = y;
4. This. vx = vx;
5. This. vy = vy;
6. This. nextox = tox;
7. This. nextoy = toy;
8. This. color = color;
9. This. visible = true;
10. This. globleDown = false;
11. This. setEnd (tox, toy );
12. }
14. SetEnd: function (tox, toy ){
15. This. tox = tox;
16. This. toy = toy;
17. Var yc = this. toy-this. y;
18. Var xc = this. tox-this. x;
19. },

X, y is the position of the particle, vx is the horizontal velocity of the particle, vy is the vertical velocity of the particle, and nexttox doesn't matter if you know it, just save the variable temporarily. Tox and toy are the destination positions of the particles.

First, give all particles a destination, which will be explained below. That is, the place where the particle will arrive, and then define a variable za as the acceleration. If the specific value is used, the approximate parameter will be displayed in multiple tests. I set it to 20, it's almost the same. Za is the acceleration of the link between the particle and the destination. Therefore, we can obtain the horizontal acceleration and vertical acceleration of the particle through the position of the particle and the location of the destination through a simple trigonometric function, this section

Copy the content to the clipboard using JavaScript Code

1. Var ax = za * (xc/this. jl ),
2. Ay = za * (yc/this. jl ),

With the horizontal acceleration and vertical acceleration, it is simpler to directly calculate the increment of the horizontal speed and vertical speed, thus changing the value of the horizontal speed and vertical speed.

Copy XML/HTML Code to clipboard

1. Vx = (this. vx + ax * time) * 0.97,
2. Vy = (this. vy + ay * time) * 0.97;

The particle slows down only when 0.97 is used to simulate energy loss. Time is the time difference between each frame.

After calculating the speed, update the particle position.

Copy XML/HTML Code to clipboard

1. This. x + = this. vx * time;
2. This. y + = this. vy * time;

Because the direction of the link between the particle and the destination is constantly changing during the flight, the horizontal acceleration and vertical acceleration of the particle must be re-calculated for each frame.

That's how motion works. Is it easy.

After the motion principle is completed, let's take a look at the specific implementation of the animation above: Initialize the animation and draw the desired word or image on an off-screen canvas, then, use the getImageData method to obtain the pixels of the canvas. Then, use a loop to find out the areas drawn from the canvas, because the data value in imageData is an rgba array, therefore, we determine that the last value, that is, the transparency is greater than 128, that is, the area that has been drawn. Then obtain the xy value of the region. To prevent page freezing caused by too many particle objects, we will limit the number of particles. The x and y values increase by 2 each time when pixels are taken, this reduces the number of particles.

Copy XML/HTML Code to clipboard

1. This. osCanvas = document. createElement ("canvas ");
2. Var osCtx = this. osCanvas. getContext ("2d ");
4. This. osCanvas. width = 1000;
5. This. osCanvas. height = 150;
7. OsCtx. textAlign = "center ";
8. OsCtx. textBaseline = "middle ";
9. OsCtx. font = "70px, bold ";
10. OsCtx. fillStyle = "# 1D181F"
11. OsCtx. fillText ("WelCome", this. osCanvas. width/2, this. osCanvas. height/2-40 );
12. OsCtx. fillText ("To wAxes 'home", this. osCanvas. width/2, this. osCanvas. height/2 + 40 );
13. Var bigImageData = osCtx. getImageData (0, 0, this. osCanvas. width, this. osCanvas. height );
15. Dots = [];
17. For (var x = 0; x
18. For (var y = 0; y
19. Var I = (y * bigImageData. width + x) * 4;
20. If (bigImageData. data [I + 3]> 128 ){
21. Var dot = new Dot (
22. Math. random ()> 0.5? Math. random () * 20 + 10: Math. random () * 20 + canvas. width-40,
23. -Math. random () * canvas. height * 2,
24. 0,
25. 0,
26. X + (canvas. width/2-this.osCanvas.width/2 ),
27. Y + (canvas. height/2-this.osCanvas.height/2 ),
28. "Rgba (" + bigImageData. data [I] + "," + bigImageData. data [I + 1] + "," + bigImageData. data [I + 2] + ", 1 )"
29. );
30. Dot. setEnd (canvas. width/2, canvas. height/2)
31. Dots. push (dot );
32. }
33. }
34. }

After obtaining the position xy value of the particle through the loop, the position is assigned to the particle to become the destination of the particle. Then, the animation starts to make the text image particle effect.