JavaScript を使用して雨のエフェクトを実現する例の共有

ずっと雨のエフェクトを書きたいと思っていたんですが、時間的にも自分自身的にも本能的に避けていて、正面から向き合う勇気があまりなくて、このエフェクトさえ実現するのは難しいことではありません。育成の過程でさらなる強化が必要なようだ。 これは非常に単純な方法であり、コードは数行しかないため、このコードは主に 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のグラフィックコードの詳細説明

Web画像上に雨エフェクトを作成するJavaScript_JavaScriptスキル

以上がJavaScript を使用して雨のエフェクトを実現する例の共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。