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

第基于JavaScript實(shí)現(xiàn)動態(tài)雨滴特效目錄演示技術(shù)棧源碼設(shè)置畫布js部分

演示

技術(shù)棧

介紹一下畫布吧：

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

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

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

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

源碼

設(shè)置畫布

canvasid="canvas"/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)建雨線

functioncreateLine(e)

vartemp=0.25*(50+Math.random()*100);

varmyline={

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);

}

雨點(diǎn)的刷新

functionupdate(){

if(dropList.length0)

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.posycanvasEl.clientHeight)

e.die=true;

for(vari=dropList.length-1;ii--)

//delitedie

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));

varmydeadline=canvasEl.clientHeight-Math.random()*canvasEl.clientHeight/5;

linelist.forEach(function(e){

vardis=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(dis35)

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(vari=linelist.length-1;ii--)

if(linelist[i].die){

linelist.splice(i,1);

render();

window.requestAnimationFrame(update);

}

雨點(diǎn)的渲染

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.p