JavaScript canvas實(shí)現(xiàn)流星特效
更新時間：2021年05月20日 15:20:54 作者：no bug no life
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)流星特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript canvas實(shí)現(xiàn)流星特效展示的具體代碼，供大家參考，具體內(nèi)容如下
1、控制透明度變化函數(shù)
function easeInQuad(curtime,begin,end,duration){
let x = curtime/duration; //x值
let y = x*x; //y值
return begin+(end-begin)*y; //套入最初的公式
}
//用平方根構(gòu)建的緩慢減速運(yùn)動 核心函數(shù):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;//初始量要加上前半段已經(jīng)完成的
return easeOutQuad(curtime1,begin1,end,duration/2);//改變量和時間都除以2
}
}
2、流星星體光環(huán)的閃爍特效
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; //套入最初的公式
}
//用平方根構(gòu)建的緩慢減速運(yùn)動 核心函數(shù):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;//初始量要加上前半段已經(jīng)完成的
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)
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript 異步調(diào)用框架 (Part 4 - 鏈?zhǔn)秸{(diào)用)
我們已經(jīng)實(shí)現(xiàn)了一個簡單的異步調(diào)用框架，然而還有一些美中不足，那就是順序執(zhí)行的異步函數(shù)需要用嵌套的方式來聲明。2009-08-08
js實(shí)現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)界面向原生界面發(fā)消息并跳轉(zhuǎn)功能,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Webpack中雪碧圖插件使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
本文主要介紹了JavaScript中的編碼和解碼函數(shù)。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
Javascript 更新 JavaScript 數(shù)組的 uniq 方法
2008-01-01
超級標(biāo)簽之一鍵解除網(wǎng)頁復(fù)制限制、網(wǎng)頁自由編輯、顯示星號密碼功能代碼
實(shí)現(xiàn)以上功能不用安裝任何插件，把下列書簽圖標(biāo)拖動到瀏覽器書簽欄，就可以實(shí)現(xiàn)一鍵解除網(wǎng)頁復(fù)制限制、網(wǎng)頁自由編輯、顯示星號密碼功能2022-09-09
webpack是一種前端資源構(gòu)建工具,一個靜態(tài)模塊打包器(module bundler),下面這篇文章主要給大家介紹了關(guān)于Webpack完整打包流程的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
JavaScript之json_動力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了JavaScript之json，JSON它是一種數(shù)據(jù)交換格式。有興趣的可以了解一下2017-06-06
這篇文章主要教大家如何簡單實(shí)現(xiàn)js拖拽效果，很詳細(xì)的js拖拽效果實(shí)現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
js中如何復(fù)制一個對象并獲取其所有屬性和屬性對應(yīng)的值
如果知道這個對象的所有屬性自然就可以重新new一個，然后對每個屬性賦值，就可以做到，但如果不知道呢？如何創(chuàng)建一個內(nèi)容相同 的對象呢？下面有個不錯的示例，大家可以看看2013-10-10