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);
            }
        }