其他分享
首页 > 其他分享> > JS雨滴下落效果

JS雨滴下落效果

作者:互联网

<!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>

标签:function,oCanvas,min,random,雨滴,JS,window,var,下落
来源: https://www.cnblogs.com/fan979398/p/11097928.html