雨滴特效源码html,js雨滴特效

html>

canvas雨滴特效

body{

margin:0;

}

canvas{

display: block;

background-color:#090909;

}

var oCanvas=document.querySelector(".rain");

var aRain=[];

var w=window.innerWidth;

var h=window.innerHeight;

oCanvas.width=w;

oCanvas.height=h;

window.onresize =function(){

w=window.innerWidth;

h=window.innerHeight;

oCanvas.width=w;

oCanvas.height=h;

}();

var canCon=oCanvas.getContext("2d");

/*var y=0;

*/

function random(min,max){

return Math.random()*(max-min)+min;

};

function Rain(){};

Rain.prototype={

init:function(){

this.x=random(0,w+100);

this.y=0;

this.w=1;

this.h=8;

this.color="#3ff";

this.vy=random(2,3);

this.height=random(0.8*h,0.9*h);

this.r=2;

this.maxR=random(30,70);

},

draw:function(){

if(this.y

canCon.fillStyle= this.color;

canCon.fillRect(this.x,this.y,this.w,this.h);

}else{

canCon.beginPath();

canCon.strokeStyle=this.color;

canCon.arc(this.x,this.y,this.r,0,Math.PI*2);

canCon.stroke();

}

},

move:function () {

if(this.y

this.y+=this.vy;

this.x-=1;

}else {

if(this.r

this.r++;

}else {

this.init();

}

}

this.draw();

}

}

function createRain(num,time){

for(var i=0;i

setTimeout(function (){

var rain=new Rain();

rain.init();

rain.draw();

aRain.push(rain);

},time*i);

}

}

createRain(30,400);

setInterval( function(){

canCon.fillStyle="rgba(0,0,0,0.09)";

canCon.fillRect(0,0,w,h);

for(var item of aRain){

item.move();

}

},1000/60);

查看效果