<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下雪</title>
<style>
*{
padding:0;
margin:0;
}
#box{
margin:0 auto;
600px;
position: relative;
}
#fcan{
position: absolute;
top: 0;
z-index: 100;
}
#bg{
position: absolute;
top: 0;
}
#bg img{
600px;
height: 400px;
}
</style>
</head>
<body>
<div id="box">
<canvas id="fcan" width="600" height="400" style="border:1px solid #333;opacity: 0.6;"></canvas>
<div id="bg"><img src="http://tupian.enterdesk.com/2013/xll/012/30/3/1.jpg" alt=""></div>
</div>
<script>
var rains=[];
var can=document.getElementById('fcan');
var ct=can.getContext('2d');
init();
setInterval(function(){
rainsNum();
ct.clearRect(0,0,600,400);
init();
dropDown();
},50);
//初始化
function init(){
ct.rect(0,0,600,400);
ct.fillStyle='#000';
ct.fill();
}
//产生随机雨滴
function createRain(){
var ix=Math.random()*600;
var iy=Math.random()*50;
var ir=Math.random()*4;
var ivy=Math.random()*5+2;
var rain={
x:ix,
y:iy,
r:ir,
vy:ivy,
g:8
};
rains.push(rain);
}
function rainsNum(){
createRain();
}
//落下
function dropDown(){
var len=rains.length;
for(var i=0;i<len;i++){
drawRain(rains[i].x,rains[i].y,rains[i].r,ct);
rains[i].v+=rains[i].g;
rains[i].y+=rains[i].vy;
}
}
//画雪花
function drawRain(x,y,r,obj){
obj.fillStyle='#fff';
obj.beginPath();
obj.arc(x,y,r,0,Math.PI*2,true);
obj.closePath();
obj.fill();
}
</script>
</body>
</html>