Using canvas to Realize Simple Snow Effect

  canvas, html, html5, javascript

First, create a new html file, which willbodySet the background to the dark blue of the sky and create onecanvas, canvas operation logic is placed insnow.jsMedium:

<!  DOCTYPE html>
 <head>
 <style>
 body {
 background-color: #102a54;
 }
 </style>
 </head>
 <body>
 <canvas id='sky'></canvas>
 <script src="snow.js"></script>
 </body>
 
 </html>

The canvas operation will be executed after the page is loaded. Firstly, the 2D context of the canvas is obtained, and the width and height of the canvas are set to the width and height of the window to ensure that the sky background covers the whole window.snow.js

window.onload = function () {
 var canvas = document.getElementById('sky');
 var ctx = canvas.getContext('2d');
 
 var W = window.innerWidth;
 var H = window.innerHeight;
 canvas.width = W;
 canvas.height = H;
 }

After the sky background is completed, we will create snowflakes. The idea is relatively simple. We will keep a rated number of snowflakes on the screen and give each snowflake a random location, random size and random falling speed:

...
 
 var flakesCount = 100;  //Number of Snowflakes
 var flakes = [];
 
 for (var i = 0;   i < flakesCount;  i++) {
 flakes.push({
 X: Math.random() * W, // snowflake x-axis position
 Y: Math.random() * H, // snowflake y-axis position
 R: Math.random() * 5+2, // radius of snowflake
 D: Math.random()+1 // snowflake density, used to control falling speed
 });
 }

Next, we need to draw these 100 snowflakes. For simplicity, we will use small white circles to represent snowflakes:

function drawFlakes() {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = '#fff';
ctx.beginPath();
for (var i = 0;   i < flakesCount;  i++) {
var flake = flakes[i];
console.log(flake);
ctx.moveTo(flake.x, flake.y);
ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2, true);
}
ctx.fill();
moveFlakes();  // todo: Snowflakes Flutter Effect
}

After the snowflakes are drawn, we need to make the snowflakes move and have the effect of falling down. Our idea is to set up a timer and re-render the canvas every 25 ms. Each time each snowflake is rendered, it moves down a certain distance, and the higher the snowflake density, the faster the falling speed. And throughMath.sinFunction to create the effect of snowflakes fluttering left and right. When snowflakes fall outside the window, they will be moved to the top of the window and fall again, as follows:

var angle = 0;
 
 function moveFlakes() {
 angle += 0.01;
 for (var i = 0;   i < flakesCount;  i++) {
 var flake = flakes[i];
 flake.y += Math.pow(flake.d, 2) + 1;  //Speed and density are not actually square relations, so they are for better effect.
 flake.x += Math.sin(angle) * 2;
 
 if (flake.y > H) {
 flakes[i] = { x: Math.random() * W, y: 0, r: flake.r, d: flake.d };
 }
 }
 }
 
 setInterval(drawFlakes, 25);

Finish, let’s take a look at the actual effect:

image

You can also visit codepen.:Snowing with canvas

Well, it’s quite like that:)