Implementation of the sky and snow Effect Based on html5canvas _ html5 tutorial tips-

This article mainly introduces how to achieve the effect of Flying Snow over the sky based on html5canvas, describes the complete implementation process and core code of this special effect, and has good practical value, for more information, see the following example to describe how to implement the snow effect on the sky based on html5 canvas. Run this example to see the great snow effect. As shown in:

The main code is as follows:

The Code is as follows:

Sky and snow

Script
Window. onload = function (){
// Canvas init
Var canvas = document. getElementById ("canvas ");
Var ctx = canvas. getContext ("2d ");

// Canvas dimensions
Var W = window. innerWidth;
Var H = window. innerHeight;
Canvas. width = W;
Canvas. height = H;

// Snowflake participant
Var mp = 3000; // max participant
Var participant = [];
For (var I = 0; I <mp; I ++)
{
Participant. push ({
X: Math. random () * W, // x-coordinate
Y: Math. random () * H, // y-coordinate
R: Math. random () * 3 + 1, // radius
D: Math. random () * mp // density
})
}

// Lets draw the flakes
Function draw ()
{
Ctx. clearRect (0, 0, W, H );

Ctx. fillStyle = "rgba (255,255,255, 0.8 )";
/* Ctx. fillStyle = "# FF0000 ";*/
Ctx. beginPath ();
For (var I = 0; I <mp; I ++)
{
Var p = participant [I];
Ctx. moveTo (p. x, p. y );
Ctx. arc (p. x, p. y, p. r, 0, Math. PI * 2, true );
}
Ctx. fill ();
Update ();
}

// Function to move the snowflakes
// Angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
Var angle = 0;
Function update ()
{
Angle + = 0.01;
For (var I = 0; I <mp; I ++)
{
Var p = participant [I];
// Updating X and Y coordinates
// We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
// Every particle has its own density which can be used to make the downward movement different for each flake
// Lets make it more random by adding in the radius
P. y + = Math. cos (angle + p. d) + 1 + p. r/2;
P. x + = Math. sin (angle) * 2;

// Sending flakes back from the top when it exits
// Lets make it a bit more organic and let flakes enter from the left and right also.
If (p. x> W | p. x <0 | p. y> H)
{
If (I % 3> 0) // 66.67% of the flakes
{
Participant [I] = {x: Math. random () * W, y:-10, r: p. r, d: p. d };
}
Else
{
// If the flake is exitting from the right
If (Math. sin (angle)> 0)
{
// Enter fromth
Participant [I] = {x:-5, y: Math. random () * H, r: p. r, d: p. d };
}
Else
{
// Enter from the right
Participant [I] = {x: W + 5, y: Math. random () * H, r: p. r, d: p. d };
}
}
}
}
}

// Animation loop
SetInterval (draw, 15 );
}
Script

The code analysis is as follows:

This line of code changes the snowflake radius:

The Code is as follows:

R: Math. random () * 3 + 1, // radius

This line of code changes the speed of snowflake fall:

The Code is as follows:

SetInterval (draw, 15 );

This line changes the snowflake density:

The Code is as follows:

Var mp = 3000; // max participant

I believe this article provides some reference value for html5 WEB programming.