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 
 

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

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