<html>
<head><style type="text/css"> #canvas{background:#000;} </style> </head>
<body> <canvas id="canvas"></canvas></body>
<script type="text/javascript">
window.onload=function(){
var _canvas=document.getElementById(‘canvas‘),//获取canvas容器
_ctx=_canvas.getContext(‘2d‘),//获取canvas画布
_h=window.innerHeight,//高度为窗口高度
_w=window.innerWidth,//宽度为窗口宽度
_count=50,//雪花数量
_angle=0,//下落角度
_snow=[];//雪花容器
_canvas.height=_h;
_canvas.width=_w;
for(var i=0;i<_count;i++){
_snow.push({
x:Math.random()*_w,
y:Math.random()*_h,
r:Math.random()*9+1,
d:Math.random()*_count
});
}
function _draw(){
_ctx.clearRect(0,0,_w,_h);
_ctx.beginPath();
_ctx.fillStyle="rgba(255,255,255,0.8)";
for(var i=0;i<_count;i++){
var _s=_snow[i];
_ctx.moveTo(_s.x,_s.y);
_ctx.arc(_s.x,_s.y,_s.r,0,Math.PI*2,true);
}
_ctx.fill();
_update();
}
function _update(){
_angle+=0.1;
for(var i=0;i<_count;i++){
var _s=_snow[i];
_s.y+=Math.cos(_angle+_s.d)+1+_s.r/2;
_s.x+=Math.sin(_angle)*2;
if(_s.x>_w+10 || _s.x<-10 || _s.y>_h){
if(i%3>0){
_snow[i]={x:Math.random()*_w,y:-20,r:_s.r,d:_s.d};
}else{
if(Math.sin(_angle)>0){
_snow[i]= {x: -10, y: Math.random()*_h, r: _s.r, d: _s.d};
}else{
_snow[i]= {x:_w+10, y: Math.random()*_h, r: _s.r, d: _s.d};
}
}
}
}
}
setInterval(_draw,30);
}
</script>
</html>