Example of implementing the effect of flying snow based on html5 canvas_html5 tutorial skills

The example in this article describes how to achieve the snowy effect based on HTML5 canvas. You can see a great snowing effect by running this example. As shown below:

The main code is as follows:

Copy code

The code is as follows:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

<script><br>window.onload = function(){<br> //canvas init<br> var canvas = document.getElementById("canvas");<br> var ctx = canvas.getContext("2d");<br> <br> //canvas dimensions<br> var W = window.innerWidth;<br> var H = window.innerHeight;<br> canvas.width = W;<br> canvas.height = H;<br> <br> //snowflake particles<br> var mp = 3000; //max particles<br> var particles = [];<br> for(var i = 0; i < mp; i )<br /> {<br /> particles.push({<br /> x: Math.random()*W, //x-coordinate<br /> y: Math.random()*H, //y-coordinate<br /> r: Math.random()*3 1, //radius<br /> d: Math.random()*mp //density<br /> })<br /> }<br /> <br /> //Lets draw the flakes<br /> function draw()<br /> {<br /> ctx.clearRect(0, 0, W, H);<br /> <br /> ctx.fillStyle = "rgba(255, 255, 255, 0.8)";<br /> /* ctx.fillStyle = "#FF0000";*/<br /> ctx.beginPath();<br /> for(var i = 0; i < mp; i )<br /> {<br /> var p = particles[i];<br /> ctx.moveTo(p.x, p.y);<br /> ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);<br /> }<br /> ctx.fill();<br /> update();<br /> }<br /> <br /> //Function to move the snowflakes<br /> //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<br /> var angle = 0;<br /> function update()<br /> {<br /> angle = 0.01;<br /> for(var i = 0; i < mp; i )<br /> {<br /> var p = particles[i];<br /> //Updating X and Y coordinates<br /> //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards<br /> //Every particle has its own density which can be used to make the downward movement different for each flake<br /> //Lets make it more random by adding in the radius<br /> p.y = Math.cos(angle p.d) 1 p.r/2;<br /> p.x = Math.sin(angle) * 2;<br /> <br /> //Sending flakes back from the top when it exits<br /> //Lets make it a bit more organic and let flakes enter from the left and right also.<br /> if(p.x > W || p.x < 0 || p.y > H)<br> {<br> if(i%3 > 0) //66.67% of the flakes<br> {<br> particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};<br> }<br> else<br> {<br> //If the flake is exitting from the right<br> if(Math.sin(angle) > 0)<br> {<br> //Enter fromth<br> particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};<br> }<br> else<br> {<br> //Enter from the right<br> particles[i] = {x: W 5, y: Math.random()*H, r: p.r, d: p.d};<br> }<br> }<br> }<br> }<br> }<br> <br> //animation loop<br> setInterval(draw, 15);<br>}<br></script>

代码分析如下：

这行代码改变雪花半径大小：

复制代码

代码如下:

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

This line of code changes the falling speed of snowflakes:

Copy code

The code is as follows:

setInterval(draw, 15);

This line changes the snowflake density:

Copy code

The code is as follows:

var mp = 3000; //max particles

I believe that what is described in this article has certain reference value for everyone’s html5 WEB programming.