js实现雨滴特效

最新推荐文章于 2024-08-18 17:22:50 发布

禅悟刂

最新推荐文章于 2024-08-18 17:22:50 发布

阅读量1.9k

点赞数 7

分类专栏： JS特效篇文章标签： js

本文链接：https://blog.csdn.net/weixin_42575310/article/details/89490093

版权

JS特效篇专栏收录该内容

6 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas雨滴特效</title>
</head>
<style>
    body{
        margin:0;
    }
    canvas{
        diaplay: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);
            this.y=0;
            this.w=2;
            this.h=10;
            this.color="#3ff";
            this.vy=random(2,3);
            this.height=random(0.8*h,0.9*h);
            this.r=2;
            this.maxR=random(80,130);
        },
        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;
            }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(100,200);
    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>