基于JavaScript實現(xiàn)動態(tài)雨滴特效

更新時間：2022年06月11日 16:36:55 作者：肥學(xué)

這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實現(xiàn)動態(tài)雨滴特效并且點擊雨滴會有雨滴爆裂的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

演示

技術(shù)棧

介紹一下畫布吧：

HTML5 標(biāo)簽用于繪制圖像（通過腳本，通常是 JavaScript）。

不過，元素本身并沒有繪制能力（它僅僅是圖形的容器） - 您必須使用腳本來完成實際的繪圖任務(wù)。

getContext() 方法可返回一個對象，該對象提供了用于在畫布上繪圖的方法和屬性

它的方法挺多的大家可以去搜一下我就說幾個常用的：

源碼

設(shè)置畫布

 <canvas id="canvas" style="position: absolute; height: 100%; width:100%;"></canvas>

js部分

跟隨鼠標(biāo)移動

window.onmousemove=function (e) 
 {
   mousePos[0]=e.clientX;
   mousePos[1]=e.clientY;
   maxspeedx=(e.clientX-canvasEl.clientWidth/2)/(canvasEl.clientWidth/2);
 }

創(chuàng)建雨線

function createLine(e)
  {
   var temp= 0.25*( 50+Math.random()*100);
    var myline={
      speed:5.5*(Math.random()*6+3),
      die:false,
      posx:e,
      posy:-200,
      h:temp,
      color:getRgb(Math.floor(temp*255/75),Math.floor(temp*255/75),Math.floor(temp*255/75))
    };
    linelist.push(myline);
  }

雨點的刷新

 function update() {
    if(dropList.length>0)
    {
       dropList.forEach(function (e) {
         e.vx=e.vx+(speedx)/2;
         e.posx=e.posx+e.vx;
         e.vy=e.vy+gravity;
         e.posy=e.posy+e.vy;
         if(e.posy>canvasEl.clientHeight)
         {
           e.die=true;
         }
       });
    }
    for(var i=dropList.length-1;i>=0;i--)
    {
      //delite die
      if(dropList[i].die){
        dropList.splice(i,1);
      }
    }
    
    speedx=speedx+(maxspeedx-speedx)/50;
  
    if(Math.random()>0)
    {
    createLine(Math.random()*2*canvasEl.width-(0.5*canvasEl.width));
    createLine(Math.random()*2*canvasEl.width-(0.5*canvasEl.width));
    createLine(Math.random()*2*canvasEl.width-(0.5*canvasEl.width));
    }
    var mydeadline=canvasEl.clientHeight- Math.random()*canvasEl.clientHeight/5;
     linelist.forEach(function (e) {
       var dis=Math.sqrt( ((e.posx+speedx*e.h)-mousePos[0])*((e.posx+speedx*e.h)-mousePos[0])+(e.posy+e.h-mousePos[1])*(e.posy+e.h-mousePos[1]));
       if(dis<35)
       {
         madedrops(e.posx+speedx*e.h,e.posy+e.h);
         e.die=true;
       }
        
       if((e.posy+e.h)>mydeadline)
       {
         if(Math.random()>0.85)
         {
           madedrops(e.posx+speedx*e.h,e.posy+e.h);
           e.die=true;
         }
       }
       if(e.posy>=canvasEl.clientHeight)
       {
         e.die=true;
       }else{
         e.posy=e.posy+e.speed;
         e.posx=e.posx+(e.speed*speedx);
       }
     });
       for(var i=linelist.length-1;i>=0;i--)
    {
      if(linelist[i].die){
        linelist.splice(i,1);
      }
    }
     render();
     window.requestAnimationFrame(update);
  }

雨點的渲染

function  render() {
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);

     linelist.forEach(
      function (line) {
   
        ctx.strokeStyle =line.color;
        ctx.lineWidth=4.5;
        ctx.beginPath();
        ctx.moveTo(line.posx,line.posy);
        ctx.lineTo(line.posx+speedx*line.h,line.posy+line.h);
        ctx.stroke();
      });
       ctx.lineWidth=1;
          ctx.strokeStyle = "#fff";
          dropList.forEach(function (e) {
           ctx.beginPath();
           ctx.arc(e.posx,e.posy,e.radius,Math.random()*Math.PI*2,1*Math.PI);
           ctx.stroke();
       });
}

以上就是基于JavaScript實現(xiàn)動態(tài)雨滴特效的詳細(xì)內(nèi)容，更多關(guān)于JavaScript動態(tài)雨滴特效的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: