Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
没有Canvas的年代，绘图只能借助Flash插件实现，页面不得不用JavaScript和Flash进行交互。有了Canvas，我们就再也不需要Flash了，直接使用JavaScript完成绘制。
我也是参考网上完成的看一下canvas绘制雪花飘落例图：
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta chartset="UTF-8">
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<style>
*{margin:0; padding:0;}
canvas{background:black;}
</style>
</head>
<body>
<canvas id="canvas">您的浏览器不支持canvas画布</canvas>
<script>
var can=document.getElementById('canvas');
var ctx=can.getContext('2d');
var wid=window.innerWidth;
var hei=window.innerHeight;
can.width=wid;
can.height=hei;
var snow=100; //雪花数量
var arr=[]; //保存雪花坐标，半径
for(var i=0; i<snow;i++){
arr.push({
x:Math.random()*wid,
y:Math.random()*hei,
r:Math.random()*7
})
}
function DrawSnow(){
ctx.clearRect(0, 0, wid, hei);
ctx.beginPath();
for(var i=0; i<snow;i++){
var p=arr[i];
ctx.moveTo(p.x,p.y)
ctx.arc(p.x,p.y,p.r,0,2*Math.PI,false)
ctx.fillStyle="white";
}
ctx.fill();
ctx.stroke();
SnowFall()
ctx.closePath();
}
//雪花飘落
function SnowFall(){
for(var i=0; i<snow; i++){
var p=arr[i];
p.y+=Math.random()*50+1;
if(p.y>hei){
p.y=0;
}
p.x+=Math.random()*50+1;
if(p.x>wid){
p.x=0;
}
}
}
setInterval(DrawSnow, 100);
</script>
</body>
</html>