今天小编给大家分享一下如何用JavaScript代码实现动态雨滴特效的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
计算
安全
数据库
网络和加速
企业服务
<canvas id="canvas" ></canvas>跟随鼠标移动
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代码实现动态雨滴特效”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
