HTML5 canvas realizes the special effect of falling snowflakes_html5 tutorial skills

I have seen many displays on the Internet showing the effect of html5 snowflakes flying, which is indeed very fascinating. I believe that everyone is as excited as me and is also very curious and wants to study how to implement the code; although these can be downloaded from many places Source code, but I don’t know other people’s ideas and analysis of difficulties when making such animations.

I just happened to study a lot these days, and I am taking advantage of the time now to dissect it step by step from demand analysis, knowledge points, and programming. If I try to make a fool of myself in front of you, please don’t laugh.

The final rendering is as follows:

Picture 1

1. Demand analysis

1. Round snowflake

The snowflake shape in this example uses a circle

2. The number of snowflakes is fixed

Carefully observe the number of white snowflakes according to Figure 1. During the falling process, the number of snowflakes in the entire picture should be fixed. This requirement needs to be obtained through our observation and analysis. This is consistent with the scene we see in real life where snowflakes are flying all over the sky.

3. The size of snowflakes is inconsistent

Each snowflake has a different size, which means the radius of the snowflake is random. This is consistent with the scene where we see snowflakes flying all over the sky in real life.

4. The position of the snowflakes is moving

Snowflakes are falling, and naturally their positions are also moving.

2. Knowledge points

1. Use Html5 Canvas JavaScript to draw a circle - forming a circular snowflake

In Html5, you need to use Canvas and use JavaScript to draw a circle to form a circular snowflake - arc(x, y, r, start, stop);

2. Random numbers—generate circular snowflakes with different radii and coordinates

In this example, when the web page is loaded for the first time, a certain number of snowflakes with different radii and positions need to be generated, so the radius and coordinates are random numbers; while the snowflakes are falling, their radius remains unchanged and the coordinates are within a certain range. changes, so the coordinates are also random numbers at this time——Math.random()

3. Programming

1. Preparation

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

HTML code:

XML/HTML CodeCopy content to clipboard

1. canvas id="mycanvas" >
2. Your browser does not support canvas
3. canvas> 

CSS code:

CSS CodeCopy content to clipboard

1. * {
2. margin: 0;
3. padding: 0;
4. }
5.                                                        
6. #mycanvas { 
7. background: black;
}

The effect at this time is as follows:

Note: canvas has an initialized height and width by default, so you don’t have to worry about it

2. The canvas fills the screen

The JavaScript code is as follows:

JavaScript Code

Copy content to clipboard

1. //Get 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 at this time is as follows:

3. Initialization generates a fixed number of snowflakes

According to our above demand analysis and interpretation of knowledge points, first of all, the number of snowflakes is fixed, so we need to define a variable var snow = 100; here it is assumed that the number of snowflakes is 100;

When generating snowflakes, the radius and position of each snowflake are different. We regard each snowflake as an object, then the properties 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 represents a circular snowflake with coordinates (1,10) and radius 5; in this example, since the radius and coordinates are random numbers, Math is used .random() generates radius and coordinates (X, Y) for 100 snowflakes respectively;

Then we have 100 snowflakes here, so in order to facilitate subsequent operations, we use an array to save these 100 snowflake objects.

The JavaScript code is as follows:

JavaScript CodeCopy content to clipboard

1. //Number of snowflakes
2. var snow = 100;
3. //Snowflake coordinates, radius
4. var arr = []; //Save the coordinates and radius of each circle
5. for (var i = 0; i
6. arr.push({
7. x: Math.random() * wid,
8. y: Math.random() * hei,
9. r: Math.random() * 10 1
10. })
11. }

4. Draw snowflakes

We have generated 100 snowflake radii and coordinates (X, Y) above. The following is to use canvas to draw snowflakes (here, we draw circles). Here we define a function

The JavaScript code is as follows:

JavaScript CodeCopy content to clipboard

1. //Drawing snowflakes
2. function DrawSnow() {
3. ctx.fillStyle="white";
4. ctx.beginPath();
5.  for (var i = 0; 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 try to refresh the webpage multiple times to see if snowflakes of different sizes and positions will be generated (normally it is possible). Once you do this, you are close to the final effect

Note: Since 100 circles need to be drawn here, the drawing start coordinates are redefined every time a circle is drawn: ctx.moveTo(p.x,p.y); otherwise strange effects will occur. If you don’t believe it, try it

5. Snowflakes fluttering

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

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

At the same time, the coordinates (X, Y) of each snowflake need to be constantly changed (within a certain range). The snowflakes here fall from the upper left to the lower right, so the X and Y coordinate values ​​​​of each snowflake are in Keep increasing, then we use a function SnowFall() to define the snowflakes falling rules

The function code is as follows:

JavaScript CodeCopy content to clipboard

1. //雪花飘落   
2. function SnowFall() {   
3.     for (var i = 0; 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. }  

然后将该函数放入DrawSnow()执行，注意：我们每隔50毫毛重画雪花，必须擦除画布，所以DrawSnow()函数体内必须在前面执行clearRect()函数，即：ctx.clearRect(0, 0, wid, hei);

此时DrawSnow函数定义如下：

JavaScript Code复制内容到剪贴板

1. //画雪花   
2. function DrawSnow() {   
3.     ctx.clearRect(0, 0, wid, hei);   
4.     ctx.fillStyle = "white";   
5.     ctx.beginPath();   
6.     for (var i = 0; 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. }   

最后执行setInterval(DrawSnow, 50); 

OK，经过我们上述步骤，小伙伴们是否已经对整个过程及技术实现很清晰了。

完整代码如下（大家可以直接复制到自己项目中执行，测试下效果）：

XML/HTML Code复制内容到剪贴板

1. html>  
2. html>  
3.   
4.     head>  
5.         meta charset="utf-8" />  
6.         title>title>  
7.         script src="js/jquery-1.8.3.min.js">script>  
8.         style type="text/css">  
9.             * {   
10.                 margin: 0;   
11.                 padding: 0;   
12.             }   
13.                
14.             #mycanvas {   
15.                 background: black;   
16.             }
17. style>
18.  head> 
20. body>
21.  canvas id="mycanvas" >
22. Your browser does not support canvas
23. canvas>
24. script>
25. //Get mycanvas canvas
26. var can = document.getElementById("mycanvas");
27. var ctx = can.getContext("2d");
28. //Canvas width
29. var wid = window.innerWidth;
30. //Canvas height
31. var hei = window.innerHeight;
32. can.width = wid;
33. can.height = hei;
34. //Number of snowflakes
35. var snow = 100;
36. //Snowflake coordinates, radius
37. var arr = []; //Save the coordinates and radius of each circle
38. for (var i = 0; i snow; i ) {
39. arr.push({
40. x: Math.random() * wid,
41.                     y: Math.random() * hei,   
42.                     r: Math.random() * 10   1   
43.                 })   
44.             }   
45.             //画雪花   
46.             function DrawSnow() {   
47.                 ctx.clearRect(0, 0, wid, hei);   
48.                 ctx.fillStyle = "white";   
49.                 ctx.beginPath();   
50.                 for (var i = 0; i  snow; i ) {   
51.                     var p = arr[i];   
52.                     ctx.moveTo(p.x, p.y);   
53.                     ctx.arc(p.x, p.y, p.r, 0, 2 * Math.PI, false);   
54.                 }   
55.                 ctx.fill();   
56.                 SnowFall();   
57.                 ctx.closePath();   
58.             }  
59.             //雪꽃飘落   
60.             기능 SnowFall() {   
61.                for (var i = 0; i  눈;  i ) {   
62.                    var p = arr[i];   
63.                    p.y  = Math.random() * 2   1;   
64.                   if (p.y > hei) {   
65.                        p.y = 0;   
66.                    }   
67.                    p.x  = Math.random() * 2   1;   
68.                   if (p.x > wid) {   
69.                       p.x = 0;   
70.                    }   
71.                 }   
72.             }   
73.             setInterval(DrawSnow, 50);   
74.         스크립트>  
75.     본체>  
76.   
77. html>  
78.   

好了，今天分享就到这里，希望对大家的文习有所帮助。
원문：http://www.cnblogs.com/tangyifeng/p/5253629.html