这次，将制作飘雪的效果，如果用CSS动画样式来做的话，可以想象，那是有多么难。所以就用JavaScript来制作。
Canvas官方教程，很详细：http://canvas.migong.org/category/canvas-animation
要使用Canvas，则需要在HTML中插入相应的DOM结构：
<canvas id="myCanvas" width="1000" height="600">Your brower does not support the Canvas element.</canvas>
上面英文的意思是：“你的浏览器不支持Canvas元素”。这样在浏览器不支持Canvas时就会显示这句话。此外，设置页面的背景颜色，以及Canvas的宽度和高度，让其充满整个浏览器屏幕：
body{
background:#0c0c0c;
margin: 0;
padding: 0;
}
html, body{
height: 100%;
width: 100%;
}
#myCanvas{
height: 100%;
width: 100%;
display: block;
}
之后，就开始写 JavaScript 代码：
var canvas=document.getElementById("myCanvas"); //获取Canvas元素
var context=canvas.getContext("2d"); //返回一个对象，该对象提供了用于在画布上绘图的方法和属性
- Canvas.getContext(contextID)： 方法返回一个用于在画布上绘图的环境。contextID直接指定想要绘制图形的类型。https://www.w3school.com.cn/jsref/met_canvas_getcontext.asp
- document.getElementById(id)：这个很熟悉，通过id获取元素
接下来，创建一个数组保存所有雪花的信息：
var particles = []; //为粒子创建一个数组
for (var i = 0; i < 500; i++) //生成500个雪花
{
particles.push({ //设置雪花的初始 x，y 的位置，x，y 方向上的速度，以及雪花的大小、颜色
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
vx: (Math.random() * 1 - 0.5), // （-0.5,0.5）范围
vy: (Math.random() * 1 + 0.5), // （0.5,1.5）范围
size: 2 + Math.random() * 2,
color: '#' + ('00000' + (Math.random() * 0x1000000<<0).toString(16)).slice(-6)
});
}
-
window.innerWidth和window.innerHeight：视口的宽度和高度。
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerWidth -
arrayObject.push(newelement1,newelement2,…,newelementX)：向数组的末尾添加一个或多个元素，并返回新的长度。这个元素在这里是一个字典。
https://www.w3school.com.cn/jsref/jsref_push.asp -
Math.random()：返回介于 0 ~ 1 之间的一个随机数。
https://www.w3school.com.cn/jsref/jsref_random.asp -
numObj.toString([radix])：返回指定 Number 对象的字符串表示形式。这里是返回16进制的字符串形式。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toString -
str.slice(beginIndex[, endIndex])：提取某个字符串的一部分，并返回一个新的字符串，且不会改动原字符串。这里是从取倒数后6个字符。
-https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/slice -
0x1000000：是十六进制的表示方式，这里是16,777,216。0x1000000<<0是左移0位。
上面我们生成了500个雪花粒子，每个雪花粒子都包含：x坐标、y坐标、x方向速度、y方向速度、大小值、颜色。每组数据是一个字典，再push到数组中。
上面代码只是设置了雪花的基本信息。接着，我们要让雪花显示出来：首先，用clearRect()把画布清空。接着，绘制每一朵雪花。先计算每朵雪花移动后的x和y的位置，包含了超出浏览器边界的判断。设置好每个雪花的颜色后，使用 context 的beginPath()方法开始雪花的绘制，圆形的设置通过arc()反三角函数来实现，绘制结束后调用closePath()方法闭合路径，最后用fill()方法填充颜色。最后的setInterval函数是每隔40毫秒执行一次timeUpdata函数，已达到雪花连绵不绝的效果。
function timeUpdate(e){
context.clearRect(0, 0, window.innerWidth, window.innerHeight); //清除画布区域
var particle;
for (var i = 0; i < 500; i++) //循环比那里所有雪花
{
particle = particles[i];
particle.x += particle.vx;
particle.y += particle.vy;
if (particle.x < 0) {
particle.x = window.innerWidth; // 当雪花移动到窗口左侧以外的地方时，使其显示在窗口最右侧
}
if (particle.x > window.innerWidth) { // 当雪花移动到窗口右侧以外的地方时，使其显示在窗口最左侧
particle.x = 0;
}
if (particle.y >= window.innerHeight) { // 因为速度是大于 0 的，所以不会小于底部
particle.y = 0; // 当雪花移动到窗口顶部以外时，重新显示在窗口最顶部
}
context.fillStyle = particle.color; // 设置雪花的颜色
context.beginPath(); //开始绘制雪花
context.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); // 绘制图形
context.closePath(); //闭合路径
context.fill(); //填充颜色
}
}
setInterval(timeUpdate, 40); // 每过40毫秒执行一次 timeUpdate 函数
- context.clearRect(x,y,width,height)：方法清空给定矩形内的指定像素。x，y相当于一个定位点，以此点为原点的宽度和高度组成的矩形就是清空的区域。
https://www.w3school.com.cn/tags/canvas_clearrect.asp
- context.fillStyle=color|gradient|pattern：设置或返回用于填充绘画的颜色、渐变或模式。
https://www.w3school.com.cn/tags/canvas_fillstyle.asp - beginPath() ：方法开始一条路径，或重置当前的路径。
https://www.w3school.com.cn/tags/canvas_beginpath.asp - context.arc(x,y,r,sAngle,eAngle,counterclockwise)：创建弧/曲线（用于创建圆或部分圆）。
https://www.w3school.com.cn/tags/canvas_arc.asp
- context.closePath()：画完图要闭合路径。
https://www.w3school.com.cn/html5/canvas_closepath.asp - context.fill()：填充当前的图像（路径）。默认颜色是黑色。
https://www.w3school.com.cn/html5/canvas_fill.asp - setInterval(code,millisec[,“lang”])：按照指定的周期（以毫秒计）来调用函数或计算表达式。
https://www.w3school.com.cn/htmldom/met_win_setinterval.asp
