[Js master path] html5 canvas animation tutorial,

[Js master path] html5 canvas animation tutorial,

Canvas is used to achieve a snowing effect. First, let's preview the effect:

 

 

First, let's analyze the effect:

1. randomly generate snowflake

2. Snow is not produced at the same time, but in a sequential order.

3. How is snowflake represented?

4. How does one continuously snow?

5. Snow is large and small

After figuring out the above issues, this effect is basically achieved,

First, because this is a full screen effect, I dynamically create a canvas and assign the width and height of the entire browser to the canvas.

 1         var Canvas = function (w, h) { 2                 this.width = w; 3                 this.height = h; 4             } 5             Canvas.prototype = { 6                 init: function () { 7                     var oC = document.createElement("canvas"); 8                     oC.setAttribute('width', this.width); 9                     oC.setAttribute('height', this.height);10                     oC.setAttribute('id', 'canvas');11                     oC.style.backgroundColor = '#000';12                     document.body.appendChild(oC);13                 }14             }15             var curWinWidth = window.innerWidth,16                 curWinHeight = window.innerHeight;17             var oCanvas = new Canvas(curWinWidth, curWinHeight);18             oCanvas.init();

After the init method of the oCanvas object is called, a canvas is appended to the end of the body. The id is canvas. The width and height are the same as the width and height of the browser, and the background is black, snow at night

Next, with the stage, the actors should be on the stage. How can they make snow? The operation related to snow is encapsulated into a class. Its basic structure is as follows:

Var Snow = function (){}

Snow. prototype = {

Init: function (){},

Draw: function (cxt ){},

Update: function (){}

}

This class has three methods (init, draw, update ).

Init: Initialize the position (x, y coordinates), speed, and radius of the snowflake (the size of the snowflake, which is represented by a circle with different radius)

            function random(min, max) {                return Math.random() * (max - min) + min;            }            init: function () {                    this.x = random(0, width);                    this.y = 0;                    this.r = random(1, 5);                    this.vy = random(3, 5);                }

In this case, add the random function to init the snowflake.

1. When a snowflake appears, it usually appears at the top of the screen, so the y coordinate of the snowflake is 0. Secondly, the x coordinate of the snowflake is random, the range is from left to right of the screen, so it is 0 ~ Width. This width is the width of the canvas, that is, the width of the browser.

2. Set the snowflake radius r to 1 ~ Any value between 5

3. Set the snowflake descent speed to 3 ~ The random speed between five. Here, the snow I make is vertical. You can expand and consider the impact of Wind Power (at this time, there must be a horizontal speed)

With these initialization parameters, we have improved the draw method to draw snow:

1                 draw: function (cxt) {2                     cxt.beginPath();3                     cxt.fillStyle = 'white';4                     cxt.arc(this.x, this.y + this.r, this.r, 0, Math.PI * 2, false);5                     cxt.fill();6                     cxt.closePath();7                     this.update(cxt);8                 },

The cxt parameter is the context of the canvas. This function is very simple. It is used to draw a circle (snowflake) by calling the value set in init in an arc method. At the end of this method, an update method is called, what does he do? It updates the speed of snow in the vertical direction.

             update: function (cxt) {                    if (this.y < height - this.r) {                        this.y += this.vy;                    } else {                        this.init();                    }                }

In the update method, we made a boundary judgment: When the snow falls down, it will definitely disappear. What should we do after it disappears? What should I do if the boundary is not reached?

The height of the canvas minus the radius of the snowflake. this is the border when the snowflake disappears, so this. y

1             var snow = [];2             for (var i = 0; i < 500; i++) {3                 setTimeout(function () {4                     var oSnow = new Snow();5                     oSnow.init();6                     snow.push(oSnow);7                 }, 10 * i);8             }

Generate 500 snowflakes instead of generating them at the same time, and then save these snowflakes to the array snow.

Then, enable the timer to keep the snow falling,

For more information about the use of requestAnimationFrame, refer to my article: [js master path] The new timer requestAnimationFrame in html5.

1              (function move() {2                 oGc.clearRect(0, 0, width, height);3                 for (var i = 0; i < snow.length; i++) {4                     snow[i].draw(oGc);5                 }6                 requestAnimationFrame(move);7             })();

Complete demo code:

1