비 효과를 얻기 위해 자바스크립트를 사용한 공유 예

저는 항상 비 효과를 쓰고 싶었지만, 시간적으로나 나 자신에게 있어서 본능적으로 피하고 정면으로 마주할 용기가 별로 나지 않습니다. 재배과정에서 더욱 강화가 필요한 것 같습니다. 매우 간단한 방법이고 코드가 몇 줄 밖에 없기 때문에 아이디어가 구현되었습니다. 코드는 주로 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 이미지_자바스크립트 기술

위 내용은 비 효과를 얻기 위해 자바스크립트를 사용한 공유 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!