JavaScript canvas实现流星特效
作者:no bug no life
这篇文章主要为大家详细介绍了JavaScript canvas实现流星特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript canvas实现流星特效展示的具体代码,供大家参考,具体内容如下
1、控制透明度变化函数
function easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = x*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } //用平方根构建的缓慢减速运动 核心函数:x*x + 2*x function easeOutQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = -x*x + 2*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } function easeInoutQuad(curtime,begin,end,duration){ if(curtime<duration/2){ //前半段时间 return easeInQuad(curtime,begin,(begin+end)/2,duration/2);//改变量和时间都除以2 }else{ let curtime1 = curtime-duration/2; //注意时间要减去前半段时间 let begin1 = (begin+end)/2;//初始量要加上前半段已经完成的 return easeOutQuad(curtime1,begin1,end,duration/2);//改变量和时间都除以2 } }
2、流星星体光环的闪烁特效
function intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) { if(fadeOpcity(cur,start,end,dur)===end){ cur = 0 let temp = start start = end end = temp } let opcity = fadeOpcity(cur,start,end,dur) let color = `rgba(0,0,0,${opcity})` clearBgcolor(wrap) newParticle (wrap,[x,y],r,color) cur=parseFloat(cur+0.1) setTimeout(()=>{intervalOpcity (cur,start,end,dur)},33) }
3、流星尾巴
function intervalMove (speed,g=0) { if(g===720){ g = 360 } g = g+speed let nextPosition = movePosition (a,g,startPosition) x = nextPosition[0] y = nextPosition[1] clearBgcolor(wrap1) for(let i =1;i<=360;i++){ let g1 = g-i/2 if(g1<0&&g<=360){ break } let g1Position = movePosition (a,g1,startPosition) newParticle (wrap1,[g1Position[0],g1Position[1]],r/(1+i/5),`rgba(255,200,200,0.5)`) } setTimeout(()=>{intervalMove (speed,g)},33) }
4、完整代码
function easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = x*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } //用平方根构建的缓慢减速运动 核心函数:x*x + 2*x function easeOutQuad(curtime,begin,end,duration){ let x = curtime/duration; //x值 let y = -x*x + 2*x; //y值 return begin+(end-begin)*y; //套入最初的公式 } function easeInoutQuad(curtime,begin,end,duration){ if(curtime<duration/2){ //前半段时间 return easeInQuad(curtime,begin,(begin+end)/2,duration/2);//改变量和时间都除以2 }else{ let curtime1 = curtime-duration/2; //注意时间要减去前半段时间 let begin1 = (begin+end)/2;//初始量要加上前半段已经完成的 return easeOutQuad(curtime1,begin1,end,duration/2);//改变量和时间都除以2 } } function newCanvas (width,height) { let bodyEl = document.body let canvasEl = document.createElement("canvas") canvasEl.width = width canvasEl.height = height canvasEl.style.position = "absolute" bodyEl.append(canvasEl) let wrap = canvasEl.getContext("2d") return wrap } function setBgcolor (wrap,color) { wrap.fillStyle=color; wrap.fillRect(0,0,wrap.canvas.width,wrap.canvas.height); } function clearBgcolor(wrap){ wrap.clearRect(0,0,wrap.canvas.width,wrap.canvas.height) } function newParticle (wrap,position,r,color) { let x = position[0] let y = position[1] wrap.fillStyle=color; wrap.beginPath(); wrap.arc(x,y,r,0,2*Math.PI); wrap.shadowBlur=20; wrap.shadowColor=`rgba(255,255,255,0.8)`; wrap.fill(); } function fadeOpcity(cur,start,end,dur){ let opcity = parseFloat(easeInoutQuad(cur,start,end,dur).toFixed(2)) return opcity } let wrap0 = newCanvas (1000,800) let wrap2 = newCanvas (1000,800) let wrap = newCanvas (1000,800) let wrap1 = newCanvas (1000,800) setBgcolor (wrap0,"black") setBgcolor (wrap,"rgba(0,0,0,0)") setBgcolor (wrap1,"rgba(0,0,0,0)") setBgcolor (wrap2,"rgba(0,0,0,0)") let startPosition = [500,200] let r = 10 let a = -200 let x = a*(1-Math.cos(0))*Math.sin(0)+startPosition[0] let y = a*(1-Math.cos(0))*Math.cos(0)+startPosition[1] function movePosition (a,g,startPosition) { let t = Math.PI*2/360 let x = a*(1-Math.cos(g*t))*Math.sin(g*t)+startPosition[0] let y = a*(1-Math.cos(g*t))*Math.cos(g*t)+startPosition[1] return [x,y] } function intervalMove (speed,g=0) { if(g===720){ g = 360 } g = g+speed let nextPosition = movePosition (a,g,startPosition) x = nextPosition[0] y = nextPosition[1] clearBgcolor(wrap1) for(let i =1;i<=360;i++){ let g1 = g-i/2 if(g1<0&&g<=360){ break } let g1Position = movePosition (a,g1,startPosition) newParticle (wrap1,[g1Position[0],g1Position[1]],r/(1+i/5),`rgba(255,200,200,0.5)`) } setTimeout(()=>{intervalMove (speed,g)},33) } function intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) { if(fadeOpcity(cur,start,end,dur)===end){ cur = 0 let temp = start start = end end = temp } let opcity = fadeOpcity(cur,start,end,dur) let color = `rgba(0,0,0,${opcity})` clearBgcolor(wrap) newParticle (wrap,[x,y],r,color) cur=parseFloat(cur+0.1) setTimeout(()=>{intervalOpcity (cur,start,end,dur)},33) } intervalOpcity () intervalMove (1)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。