Canvas 雨滴特效

DOCTYPE html>

    
        
        汇制雨滴
        
            *{
                margin: 0;
                padding: 0;
            }
            canvas{
                display: block;
                /*vertical-align: middle;*/
                background: #000;
            }
        
    
    
        您的浏览器不支持画布，请您更换浏览器
    
    
        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 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