码迷,mamicode.com
首页 > 其他好文 > 详细

canvas简单下雨特效

时间:2017-04-08 16:20:54      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:i++   png   text   .com   清除   net   效果   pat   长度   

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

技术分享

思路简单的说一下

随机在屏幕中的位置画雨滴,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);                
            }            
        }        
  

 

canvas简单下雨特效

标签:i++   png   text   .com   清除   net   效果   pat   长度   

原文地址:http://www.cnblogs.com/anxiaoyu/p/6681824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!