canvas雨滴特效

若打不开，请更换浏览器

/* cxt.fillStyle=“white”;
cxt.fillRect(150,150,100,100);画实心矩形
/*cxt.strokeStyle=“white”;
cxt.strokeRect(150,150,100,100);画空心矩形

}
/*var y=0;
setInterval(function () {
    //cxt.clearRect(0,0,w,h);
    cxt.fillStyle="rgba(0,0,0,0.01)";
    cxt.fillRect(0,0,w,h);
    cxt.fillStyle="#fff";
    cxt.fillRect(150,y++,10,10);
},1000/60)*/

function Rain() {}
function random(min,max){ //产生随机雨
return Math.random()(max-min)+min;
}
Rain.prototype={
init:function () {
this.x = random(0,w);//雨的基本配置
this.y = 0;//雨滴初始y轴坐标
this.v = random(4,5);//移动速度随机
this.h = random(0.8h,0.9h);//地面
this.r = 1;//雨滴初始半径
this.vr = random(1,1.5);//圆的半径变化范围
this.a = 1;//圆的透明度
this.va=0.9 //透明度变化系数
},
draw:function () {
//画雨滴和线
if(this.y<this.h){
//画一个实心矩形
cxt.fillStyle=“DarkTurquoise”;
cxt.fillRect(this.x,this.y,2,10);
}
else
{
cxt.strokeStyle=“rgba(0,206,209,”+this.a+")";//雨滴的透明度
cxt.beginPath();//到达地面重新画
cxt.arc(this.x,this.y,this.r,0,Math.PI2);
cxt.stroke();//画一个空心圆形
}
},
move:function () {
//移动雨滴
if(this.y<this.h){
this.y+=this.v;
}
else{
if(this.a>0.02)
{
this.r+=this.vr;
if(this.r>50)
{
this.a*=this.va;
}
}
else{
this.init();
}
}
this.draw();
}
}
//复用性
var rainArray=[];
//创建雨滴
function creat(){
var rain = new Rain();
rain.init();
rain.draw();
rainArray.push(rain);
}
for(var i=0;i<50;i++){
setTimeout(creat,200*i);
}
//移动雨滴
function moveRain() {
cxt.fillStyle=“rgba(0,0,0,0.01)”;
cxt.fillRect(0,0,w,h);
for(var k=0;k<rainArray.length;k++)
{
rainArray[k].move();
}
}
setInterval(moveRain,1000/60);//时间间隔