HTML5 canvas draws snowflake falling animation (demand analysis, knowledge points, programming distribution details ),

HTML5 canvas draws snowflake falling animation (demand analysis, knowledge points, programming distribution details ),

Seeing a lot of html5 snowflake flying effects on the internet is really fascinating. I believe that everyone is also as curious as I am, and I want to study how to implement the Code; although the source code can be downloaded from 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:

Figure 1

I. Requirement Analysis

1. Circular snowflake

In this example, the snowflake shape is circular.

2. Fixed snow volume

According to Figure 1, observe the number of white snowflakes carefully. During the falling process, the number of snowflakes in the whole graph should be fixed. 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:

<Canvas id = "mycanvas"> your browser does not support canvas </canvas>

 

CSS code:

* {    margin: 0;    padding: 0;}            #mycanvas {    background: black;}

 

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:

// Obtain the mycanvas canvas var can = document. getElementById ("mycanvas"); var ctx = can. getContext ("2d"); // canvas width var wid = window. innerWidth; // canvas height var hei = window. innerHeight; can. width = wid; 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:

// Number of snowflakes var snow = 100; // snowflake coordinate and radius var arr = []; // Save the coordinates and radius of each circle for (var I = 0; I <snow; I ++) {arr. push ({x: Math. random () * wid, y: Math. random () * hei, r: Math. random () * 10 + 1 })}

 

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:

// Draw snowflake function DrawSnow () {ctx. fillStyle = "white"; ctx. beginPath (); for (var I = 0; I <snow; I ++) {var p = arr [I]; ctx. moveTo (p. x, p. y); ctx. arc (p. x, p. y, p. r, 0, 2 * Math. PI, false);} ctx. fill (); 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:

// Function SnowFall () {for (var I = 0; I <snow; I ++) {var p = arr [I]; p. y + = Math. random () * 2 + 1; if (p. y> hei) {p. y = 0;} p. x + = Math. random () * 2 + 1; if (p. x> wid) {p. x = 0; <span> }}

 

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:

// Draw snowflake function DrawSnow () {ctx. clearRect (0, 0, wid, hei); ctx. fillStyle = "white"; ctx. beginPath (); for (var I = 0; I <snow; I ++) {var p = arr [I]; ctx. moveTo (p. x, p. y); ctx. arc (p. x, p. y, p. r, 0, 2 * Math. PI, false);} ctx. fill (); SnowFall (); ctx. closePath ();}

 

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 ):

<! DOCTYPE html> 
 
 
Now, I am here to share my share today. I am writing about it in the middle of the night (now: 00:22:27 on March 13, March 8, 2016). I have no credit, but I have to make a comment.
 
There will be more in the future. Please join us.