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*xfunction 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)

JavaScript可以做什么

1.可以使网页具有交互性，例如响应用户点击，给用户提供更好的体验。2.可以处理表单，检验用户的输入，并提供及时反馈节省用户时间。3.可以根据用户的操作，动态的创建页面。4使用JavaScript可以通过设置cookie存储在浏览器上的一些临时信息。

看完了这篇文章，相信你对“JavaScript中canvas如何实现流星特效”有了一定的了解，如果想了解更多相关知识，欢迎关注编程网精选频道，感谢各位的阅读！