HTML5canvas implement snowflake falling special effect _ html5 tutorial skills-

This article describes in detail how HTML5canvas achieves the special effect of falling snow, if you are interested, you can refer to the following articles to see the effects of html5 snowflake flying on the Internet. It is really fascinating. I believe that everyone is curious as they are, I want to study how to implement the Code. Although the source code can be downloaded in many places, I do not know the ideas and difficulties of others in making such animations.

I have learned a little over the past few days, and I am also taking the time to analyze the requirements, knowledge points, and programming step by step. If I want to make a big deal in front of Guan Gong, don't laugh.

The final result is as follows:

I. Requirement Analysis

1. Circular snowflake

In this example, the snowflake shape is circular.

2. Fixed snow volume

According to the number of white snowflakes observed carefully, the number of snowflakes in the entire image should be fixed during the falling process. This requirement is obtained through our observation and analysis. This is consistent with the scene where we see a snowflake in our real life.

3. Inconsistent snowflake sizes

Each snowflake has different sizes, which means that the snowflake radius is random. This is also consistent with the scene where we see a snowflake in our real life.

4. Move the snowflake

Snow falls, and naturally their locations are moving.

Ii. knowledge points

1. Draw a circle using Html5 Canvas + JavaScript-forming a circular snowflake

In Html5, Canvas needs to be used to draw circles with JavaScript at the same time to form a circular Snowflake-arc (x, y, r, start, stop );

2. Random Number-generate circular snow with different radius and coordinates

In this example, when a webpage is loaded for the first time, a certain number of snowflakes with different radius and locations need to be generated, so the radius and coordinates are random numbers. The radius of the snowflake remains unchanged during the falling process, the coordinates change within a certain range, so the coordinates are also random numbers -- Math. random ()

3. Programming

1. Preparations

Place a canvas and set the background color of the entire body to black.

HTML code:

Copy XML/HTML Code to clipboard

2. Your browser does not support canvas

CSS code:

Copy the content to the clipboard using CSS Code.

1. *{
2. Margin: 0;
3. Padding: 0;
4. }
6. # Mycanvas {
7. Background: black;
8. }

The effect is as follows:

Note: canvas has an initialization height and width by default, so you do not need to tangle.

2. Full Screen Display of the canvas

The JavaScript code is as follows:

Copy the content to the clipboard using JavaScript Code

1. // Obtain the mycanvas canvas
2. Var can = document. getElementById ("mycanvas ");
3. Var ctx = can. getContext ("2d ");
4. // Canvas width
5. Var wid = window. innerWidth;
6. // Canvas height
7. Var hei = window. innerHeight;
8. Can. width = wid;
9. Can. height = hei;

The effect is as follows:

3. initialize and generate a fixed number of snowflakes

According to our above requirement analysis and knowledge point explanation, the number of snowflakes is fixed first, so we need to define a variable var snow = 100. Here we assume that the number of snowflakes is 100 ,;

When a snowflake is generated, the radius and position of each snowflake are different. When we regard each snowflake as an object, the attributes of this object include: radius, coordinates (X, Y ), then a snowflake object can be written as var snowOject = {x: 1, y: 10, r: 5}. Here it represents a circular snowflake with a coordinate of () with a radius of 5; in this example, Math is used because the radius and coordinates are random numbers. random () generates the radius and coordinates (X and Y) of 100 snowflakes, respectively );

We have 100 million snowflakes here, so to facilitate subsequent operations, we will use an array to save these 100 snowflake objects.

The JavaScript code is as follows:

Copy the content to the clipboard using JavaScript Code

1. // Snowflake count
2. Var snow = 100;
3. // Snowflake coordinates and radius
4. Var arr = []; // Save the coordinates and radius of each circle.
5. For (var I = 0; I <snow; I ++ ){
6. Arr. push ({
7. X: Math. random () * wid,
8. Y: Math. random () * hei,
9. R: Math. random () * 10 + 1
10. })
11. }

4. Draw snow

We have generated 100 snowflake radius and coordinates (X, Y). The following is a circular painting of snow using canvas (circle). A function is defined here.

The JavaScript code is as follows:

Copy the content to the clipboard using JavaScript Code

1. // Draw snowflake
2. Function DrawSnow (){
3. Ctx. fillStyle = "white ";
4. Ctx. beginPath ();
5. For (var I = 0; I <snow; I ++ ){
6. Var p = arr [I];
7. Ctx. moveTo (p. x, p. y );
8. Ctx. arc (p. x, p. y, p. r, 0, 2 * Math. PI, false );
9. }
10. Ctx. fill ();
12. Ctx. closePath ();

Then call the DrawSnow () function. The effect is as follows:

You can refresh the page multiple times to see if different sizes and locations of snow are generated (normally). This is almost the final effect.

Note: Because 100 circles need to be drawn here, every time you draw a circle, you can redefine the starting coordinate of the painting, that is, ctx. moveTo (p. x, p. y); otherwise, it will have a strange effect. If you don't believe it, try it.

5. snow float

We have drawn 100 million snowflakes above. Unfortunately, only by refreshing the web page can we see the changed effect, but what we need to achieve is that the snowflake keeps moving.

First, we need to use the setInterval function to repeatedly redraw snow. The interval here is 50 milliseconds: setInterval (DrawSnow, 50 );

At the same time, the coordinates of each snowflake (X and Y) need to be constantly changed (within a certain range). Here, the snowflake falls from the top left to the bottom right, so every X and Y coordinate values keep increasing, so we use a function SnowFall () to define the rule of Snow drifting.

The code for this function is as follows:

Copy the content to the clipboard using JavaScript Code

1. // Snowflake falling
2. Function SnowFall (){
3. For (var I = 0; I <snow; I ++ ){
4. Var p = arr [I];
5. P. y + = Math. random () * 2 + 1;
6. If (p. y> hei ){
7. P. y = 0;
8. }
9. P. x + = Math. random () * 2 + 1;
10. If (p. x> wid ){
11. P. x = 0;
12. "White-space: pre">}
13. }
14. }

Then put this function into DrawSnow () for execution. Note: When we draw a snowflake every 50 milliseconds, We must erase the canvas. Therefore, the DrawSnow () function must first execute the clearRect () function, that is, ctx. clearRect (0, 0, wid, hei );

The DrawSnow function is defined as follows:

Copy the content to the clipboard using JavaScript Code

1. // Draw snowflake
2. Function DrawSnow (){
3. Ctx. clearRect (0, 0, wid, hei );
4. Ctx. fillStyle = "white ";
5. Ctx. beginPath ();
6. For (var I = 0; I <snow; I ++ ){
7. Var p = arr [I];
8. Ctx. moveTo (p. x, p. y );
9. Ctx. arc (p. x, p. y, p. r, 0, 2 * Math. PI, false );
10. }
11. Ctx. fill ();
12. SnowFall ();
13. Ctx. closePath ();
14. }

Finally, execute setInterval (DrawSnow, 50 );

OK. After the above steps, are our friends clear about the entire process and technical implementation.

The complete code is as follows (you can directly copy it to your project for execution and test the effect ):

Copy XML/HTML Code to clipboard

13. Your browser does not support canvas

Now, let's share it here. I hope it will help you with your learning.
Original article: http://www.cnblogs.com/tangyifeng/p/5253629.html