Example sharing of using javascript to achieve rain effect-JS Tutorial-php.cn

Example sharing of using javascript to achieve rain effect

小云云

Release： 2018-03-15 09:34:44

Original

2467 people have browsed it

I have always wanted to write a rain effect, but both in terms of time and myself, I instinctively avoid it and don’t have much courage to face it head-on. Even this effect is not difficult to achieve. . It seems that in the process of cultivation, further strengthening is needed. Because it is a very simple method and there are only a few lines of code, the idea is implemented. The main code is mainly the canvas non-stop random Draw to form the visual effect of continuous rain:

(function(){
         var canvas = document.getElementById_x(&#39;canvas&#39;);
         var ctx = canvas.getContext(&#39;2d&#39;);
         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,&#39;purple&#39;);
         color.addColorStop(1,&#39;rgba(255,255,255,0.2)&#39;);
         //ctx.strokeStyle = &#39;rgba(255,255,255,0.2)&#39;;
         ctx.strokeStyle = color;
         function drawRain(x,y)
         {       
               //每次绘制渐变线条 都需要找到坐标
               var color = ctx.createLinearGradient(x,y,x+angle,y+len);
               //color.addColorStop(0,&#39;rgba(254,139,199,0.3)&#39;);
               color.addColorStop(0,&#39;rgba(0,0,0,0.1&#39;);
               color.addColorStop(1,&#39;rgba(255,255,255,0.2)&#39;);
               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);
         }
})();

Copy after login

Note: It should be noted that each time you draw, you need to create a gradient color again, because creating a gradient color requires coordinate values.

Of course, under normal circumstances, you need to create several variables to control the raindrops Raindrop angle, raindrop length, raindrop number, etc.

Related recommendations:

How to use the rain effect in js? Summarize the usage of rain effect examples

Detailed explanation of the graphic and text code of javascript to achieve rain effect

javascript to create web page images to implement up and down Rain effect_javascript skills

The above is the detailed content of Example sharing of using javascript to achieve rain effect. For more information, please follow other related articles on the PHP Chinese website!