<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas雨滴特效</title>
</head>
<style>
body{
margin:0;
}
canvas{
display: block;
background-color:#090909;
}
</style>
<body>
<canvas class="rain">
</canvas>
<script>
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<this.height){
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.height){
this.y+=this.vy;
this.x-=1;
}else {
if(this.r<this.maxR){
this.r++;
}else {
this.init();
}
}
this.draw();
}
}
function createRain(num,time){
for(var i=0;i<num;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);
</script>
</body>
</html>