首页 > web前端 > js教程 > javascript实现下雨效果的实例分享

javascript实现下雨效果的实例分享

小云云
发布: 2018-03-15 09:34:44
原创
2483 人浏览过

一直都想写一个下雨的效果,可是无论是时间上,还是从自身来说,都本能的去躲避,没有太多正面面对的勇气,即使这个效果也不难实现。看来,在修炼的历程上,还需要更进一步加强才行。由于采用的是很简单的方法,代码也没几行,思路实现了下,代码主要话,主要是采用的canvas不停随机绘制,形成不断下雨的视觉效果:

(function(){
         var canvas = document.getElementById_x('canvas');
         var ctx = canvas.getContext('2d');
         var w = document.documentElement.offsetWidth;
         var h = document.documentElement.offsetHeight;
         var x = 0, y = 0,len = 200,angle = -2,count = 100;
         var rainTimer = null,drawTimer = null;
         //线条颜色
         var color = ctx.createLinearGradient(0,0,0,len);
         color.addColorStop(0,'purple');
         color.addColorStop(1,'rgba(255,255,255,0.2)');
         //ctx.strokeStyle = 'rgba(255,255,255,0.2)';
         ctx.strokeStyle = color;
         function drawRain(x,y)
         {       
               //每次绘制渐变线条 都需要找到坐标
               var color = ctx.createLinearGradient(x,y,x+angle,y+len);
               //color.addColorStop(0,'rgba(254,139,199,0.3)');
               color.addColorStop(0,'rgba(0,0,0,0.1');
               color.addColorStop(1,'rgba(255,255,255,0.2)');
               ctx.strokeStyle = color;
               ctx.beginPath()
               ctx.moveTo(x,y);
               ctx.lineWidth=1;
               ctx.lineTo(x + angle,y+len);
               ctx.stroke();
         }
 
         //绘制满屏的雨滴
         function fullWindowRain()
         {       
              var i = 0;
              for(i = 0;i < count; i++)
              {
                     drawRain(w*Math.random(),h*Math.random());
              }
         }
         //改变大雨或者小雨
         function changeRain()
         {
              rainTimer = setInterval(function(){
                     count  = Math.ceil(500 + 100 * Math.random());
              },2000);
         }
         changeRain();
         reDraw();
         //重绘的频率
         function reDraw()
         {
             drawTimer = setInterval(function(){
                 ctx.clearRect(0,0,w,h+200);
                 fullWindowRain();
             },100);
         }
})();
登录后复制

注意:其中需要注意的每次绘制的都需要再次创建渐变色,因为创建渐变色需要坐标值。

当然,在正常的情况时需要创建几个变量俩实现对雨滴的调控的 雨滴角度,雨滴长度,雨滴数量等。

相关推荐:

js中下雨效果如何使用?总结下雨效果实例用法

javascript实现下雨效果的图文代码详解

javascript制作网页图片上实现下雨效果_javascript技巧

以上是javascript实现下雨效果的实例分享的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板