基于JavaScript如何实现动态雨滴特效

今天小编给大家分享一下基于JavaScript如何实现动态雨滴特效的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

演示

技术栈

介绍一下画布吧：

HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。

不过， 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。

getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性

常用的：

源码

设置画布

 <canvas id="canvas" ></canvas>

js部分

跟随鼠标移动

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

创建雨线

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如何实现动态雨滴特效”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。