起首新建一个html文件，将body的背景设置为天空的那种深蓝色，并建立一个canvas，canvas的操纵逻辑都放在snow.js中：
<!DOCTYPE html>
<head>
<style>
body {
background-color: #102a54;
}
</style>
</head>
<body>
<canvas id='sky'></canvas>
<script src="snow.js"></script>
</body>
</html>
canvas的操纵将在页面加载完以后实行，起首获取到canvas的二维context，并将canvas宽高设置为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;
}
天空背景完成后，我们来建立雪花，思绪比较简朴，我们让屏幕上坚持一个额外数目的雪花，并给每一个雪花一个随机的位置、随机的大小以及随机的着落速率：
...
var flakesCount = 100; // 雪花个数
var flakes = [];
for (var i = 0; i < flakesCount; i++) {
flakes.push({
x: Math.random() * W, // 雪花x轴位置
y: Math.random() * H, // 雪花y轴位置
r: Math.random() * 5 + 2, // 雪花的半径
d: Math.random() + 1 // 雪花密度，用于掌握着落速率
});
}
接下来我们须要将这100个雪花绘制出来，简朴起见，我们就用一个个白色的小圆示意雪花：
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: 雪花飞舞结果
}
雪花绘制完成后，我们须要让雪花动起来，有飘落的结果。我们思绪是设置一个定时器，每隔25ms从新衬着一次canvas，每次衬着每一个雪花往下挪动一段距离，雪花密度越大着落速率越快。而且经由过程Math.sin函数营造出雪花摆布飞舞的结果，当雪花落到窗口表面后将雪花从新挪动到窗口上方再次着落，完成以下：
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; // 速率和密度实际上不是平方的关联，这么些是为了结果越发犬牙交错
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);
完成，我们来看一下实际结果：
嗯，还挺像那末回事儿:)
完全代码：
<!DOCTYPE html>
<head>
<style>
body {
background-color: #102a54;
}
</style>
</head>
<body>
<canvas id='sky'></canvas>
<script src="snow.js"></script>
</body>
</html>
window.onload = function () {
// get the canvas and context
var canvas = document.getElementById('sky');
var ctx = canvas.getContext('2d');
// set canvas dims to window height and width
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;
// generate snowflakes and apply attributes
var flakesCount = 100;
var flakes = []; // flake instances
// loop through the empty flakes and apply attributes
for (var i = 0; i < flakesCount; i++) {
flakes.push({
x: Math.random() * W,
y: Math.random() * H,
r: Math.random() * 5 + 2, // 2px - 7px
d: Math.random() + 1
});
}
// draw flakes onto canvas
function drawFlakes() {
ctx.clearRect(0, 0, W, H);
ctx.fillStyle = '#fff';
ctx.beginPath();
for (var i = 0; i < flakesCount; i++) {
var flake = flakes[i];
ctx.moveTo(flake.x, flake.y);
ctx.arc(flake.x, flake.y, flake.r, 0, Math.PI * 2, true);
}
ctx.fill();
moveFlakes();
}
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;
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);
}
以上就是用canvas完成简朴的下雪结果（附代码）的细致内容，更多请关注ki4网别的相干文章！
