Exemple de partage d'utilisation de javascript pour obtenir un effet de pluie

J'ai toujours voulu écrire un effet de pluie, mais tant en termes de temps que de moi-même, je l'évite instinctivement et n'ai pas beaucoup de courage pour y faire face. Même cet effet n'est pas difficile à réaliser. atteindre. . Il semble que dans le processus de culture, un renforcement supplémentaire soit nécessaire. Parce qu'il s'agit d'une méthode très simple et qu'il n'y a que quelques lignes de code, l'idée est implémentée. Le code est principalement basé sur le canvas non-. arrêter le dessin aléatoire pour former l'effet visuel d'une pluie continue :

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

Remarque : il convient de noter qu'à chaque fois que vous dessinez, vous devez créer à nouveau la couleur dégradée, car la création la couleur du dégradé nécessite des valeurs de coordonnées.

Bien sûr, dans des circonstances normales, vous devez créer plusieurs variables pour contrôler les gouttes de pluie Angle des gouttes de pluie, longueur des gouttes de pluie, nombre de gouttes de pluie, etc.

Recommandations associées :

Comment utiliser l'effet pluie en js ? Résumer l'utilisation d'exemples d'effet de pluie

Explication détaillée du code graphique pour obtenir l'effet de pluie en utilisant javascript

Javascript pour créer images de pages Web et implémentez-les Compétences Rain effect_javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!