Canvas 雨滴特效

以你之姓@ 2023-10-06 19:34 18阅读 0赞

#### 阅读目录 ####

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>汇制雨滴</title>
            <style type="text/css">
                *{
          
                    margin: 0;
                    padding: 0;
                }
                canvas{
          
                    display: block;
                    /*vertical-align: middle;*/
                    background: #000;
                }
            </style>
        </head>
        <body>
            <canvas id="canvas">您的浏览器不支持画布，请您更换浏览器</canvas>
        </body>
        <script type="text/javascript">
            var can = document.getElementById('canvas');
            //设置2d绘图
            var ctx = can.getContext('2d')
             
            //获取浏览器窗口的宽高
            var w = can.width = window.innerWidth;
            var h = can.height = window.innerHeight;
             
            //自适应浏览器宽高
             window.onresize = function(){
          
                w = can.width = window.innerWidth;
                h = can.height = window.innerHeight;
             }
              
             //canvas绘制矩形
             //设置矩形框的路径
                //ctx.rect(x,y,w,h); //xy 坐标  wh宽高
             //画出来
                //ctx.fill();  //填充方法
                //stx.stroke(); //触笔方法 空心的
    //          ctx.fillStyle = 'red';
    //          ctx.fillRect(100,100,100,100)
    //          //绘制圆形
    //          ctx.arc(250,250,50,0,Math.PI*2,false)
    //          ctx.strokeStyle = 'red';
    //          ctx.stroke();
                 
             //运动
    //       var y = 0;
    //          setInterval(function(){
          
    //              y++;
    //              //先清空再绘制
    //              ctx.clearRect(0,0,w,h);
    //              ctx.fillRect(100,y,100,100)
    //          },30)
            //雨滴特效
            function Drop(){
           //创建雨滴类
                 
            }
            //原型
            Drop.prototype ={
          
                //初始化
                init:function(){
          
                    this.x = rand(0,w);//雨滴的初始X坐标
                    this.y = 0;//雨滴的初始Y坐标
                    this.vy = rand(4,5) //雨滴下落的速度
                    this.l = rand(0.8*h,0.9*h);//雨滴下落的最大高度
                    this.r = 1;//初始半径
                    this.vr = 1; //半径增大的速度
                    this.a = 1; //初始透明度
                    this.va = 0.9; //透明度变化系数
                },
                //绘制
                draw:function(){
          
                    if (this.y>this.l) {
          
                        ctx.beginPath() //开始路径
                        //绘制波纹(圆形)
                        ctx.arc(this.x,this.y,this.r,0,Math.PI*2,false)
                        ctx.strokeStyle = 'rgba(0,255,255,'+ this.a + ')';
                        ctx.stroke();
                    }else{
          
                        //绘制下落的雨滴
                        //ctx.clearRect(0,0,w,h);
                        ctx.fillStyle = 'rgba(0,255,255,1)'
                        ctx.fillRect(this.x,this.y,2,10);
                    }
                     
                    this.update();
                },
                //更新坐标
                update:function(){
          
                    //当y坐标小于1高度的时候就一直累加
                    if (this.y<this.l) {
          
                        this.y += this.vy;
                    }else{
          
                        //圆形半径增大
    //                  if (this.r<50) {
          
    //                      this.r += this.vr;
    //                  }else{
          
    //                      
    //                  }
                        //判断透明度
                        if (this.a>0.03) {
          
                            this.r += this.vr;
                            if (this.r > 50) {
          
                                this.a *= this.va;
                            }
                        }else{
          
                            //重新初始化了
                            this.init()
                        }
                         
                    }
    //              this.y += this.vy;
                }
            }
            //实例化雨滴对象
    //      var drop = new Drop();
    //      drop.init();
             
            var drops = [];
            for (var i=0; i<30; i++) {
          
                setTimeout(function(){
          
                    var drop = new Drop();
                    drop.init();
                    drops.push(drop);
                },i*200)
                 
            }
             
            setInterval(function(){
          
                //绘制一个透明层
                ctx.fillStyle = 'rgba(0,0,0,0.1)';
                ctx.fillRect(0,0,w,h)
                for (var i=0; i<drops.length; i++) {
          
                    drops[i].draw()
                }
    //          drop.draw()
            },1000/60); //帧数
             
            function rand(min,max){
          
                return Math.random()*(max-min) +min;//min~MAX
            }
        </script>
    </html>

![在这里插入图片描述][f0b43ce18554419f8af8d1f07f6be54d.gif_pic_center]

[f0b43ce18554419f8af8d1f07f6be54d.gif_pic_center]: https://img-blog.csdnimg.cn/f0b43ce18554419f8af8d1f07f6be54d.gif#pic_center