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

演示
技术栈
源码

设置画布
js部分

演示

文章图片

技术栈介绍一下画布吧：
HTML5 标签用于绘制图像（通过脚本，通常是 JavaScript）。
不过，元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。
getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性
它的方法挺多的大家可以去搜一下我就说几个常用的：

文章图片

文章图片

源码
设置画布

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

雨点的渲染

functionrender() {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实现动态雨滴特效】以上就是基于JavaScript实现动态雨滴特效的详细内容，更多关于JavaScript动态雨滴特效的资料请关注脚本之家其它相关文章！