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)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。