canvas简单下雨特效

Posted 2020-09-09 安筱雨

前面做了两个简单的效果，这次就来个下雨的效果

思路简单的说一下

随机在屏幕中的位置画雨滴，moveTo(x,y)

雨滴的长度就是lineTo(x,y+len)

每次重新绘制页面，就能达到下雨的效果了

        //canvas宽为650，高为474
        //angle为倾斜的角度，Len为雨滴的长度，count为雨滴的数量  
        var W = 650, H = 474, ctx, angle = 0, len = 20, count = 50;            
        var canvas =document.getElementById("myCanvas");            
        ctx = canvas.getContext(\'2d\');            
                   
        ctx.strokeStyle = \'rgba(255, 255, 255, 0.2)\';            
        var run = setInterval(draw, 100);     

        function draw() {               
            //清除上一帧 
            ctx.clearRect(0, 0, W, H); 
            //重新绘制               
            xiayus();            
        }           

        function xiayu(x, y, r) {                
            ctx.beginPath();                
            ctx.moveTo(x, y);                
            
            ctx.lineTo(x + angle, y + len);                
            ctx.lineWidth = 2;                
            ctx.stroke();            
        }            
        function xiayus() {                
            for (var i = 1; i <= count; i++) {                    
                xiayu(Math.random() * W, Math.random() * H, angle);                
            }            
        }