canvas簡單下雨特效

前面做了兩個簡單的效果，這次就來個下雨的效果

思路簡單的說一下

隨機在屏幕中的位置畫雨滴，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);                
            }            
        }