流星効果を実現する JavaScript キャンバス

関数easeInQuad(curtime,begin,end,duration){
            let x = curtime/duration; //x 値let y = x*x; //y 値return begin+(end-begin)*y; //元の数式を挿入}
        // 平方根で構築されたゆっくりした減速運動のコア機能: x*x + 2*x
関数easeOutQuad(curtime,begin,end,duration){
            let x = curtime/duration; //x 値let y = -x*x + 2*x; //y 値return begin+(end-begin)*y; //元の数式を挿入}
関数easeInoutQuad(curtime,begin,end,duration){
            if(curtime<duration/2){ // 時間の前半 return easyInQuad(curtime,begin,(begin+end)/2,duration/2); // 変更量と時間は2で割られる
            }それ以外{
                let curtime1 = curtime-duration/2; // 時間は前半から減算されることに注意してください。let begin1 = (begin+end)/2; // 初期量は前半で完了した量に加算される必要があります。return easyOutQuad(curtime1,begin1,end,duration/2); // 変更量と時間は 2 で割られます。
            }
}

関数 intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) {
            （fadeOpcity（cur、start、end、dur）===end）の場合{
                カーソル = 0
                temp = 開始する
                開始 = 終了 
                終了 = 一時
            }
            opcity = fadeOpcity(cur,start,end,dur) とします。
            色を `rgba(0,0,0,${opcity})` とします
            クリア背景色(ラップ)
            newParticle (ラップ、[x,y],r,色)
            cur = parseFloat(cur + 0.1)
            setTimeout(()=>{intervalOpcity(現在、開始、終了、継続時間)},33)
}

関数 intervalMove (speed,g=0) {
            g===720の場合{
                グラム = 360
            }
            g = g + 速度
            次の位置をmovePosition(a,g,startPosition)とします。
            x = 次の位置[0]
            y = 次の位置[1]
            クリア背景色(ラップ1)
            (i =1;i<=360;i++とします){
                g1 = gi/2とする
                g1<0&&g<=360){
                    壊す
                }
                g1Position = movePosition (a,g1,startPosition) とします。
                新しいパーティクル (wrap1、[g1Position[0]、g1Position[1]]、r/(1+i/5)、`rgba(255,200,200,0.5)`)
            }
            setTimeout(()=>{intervalMove(speed,g)},33)
        }

関数easeInQuad(curtime,begin,end,duration){
            let x = curtime/duration; //x 値let y = x*x; //y 値return begin+(end-begin)*y; //元の数式を挿入}
        // 平方根で構築されたゆっくりした減速運動のコア機能: x*x + 2*x
        関数easeOutQuad(curtime,begin,end,duration){
            let x = curtime/duration; //x 値let y = -x*x + 2*x; //y 値return begin+(end-begin)*y; //元の数式を挿入}
        関数easeInoutQuad(curtime,begin,end,duration){
            if(curtime<duration/2){ // 時間の前半 return easyInQuad(curtime,begin,(begin+end)/2,duration/2); // 変更量と時間は2で割られる
            }それ以外{
                let curtime1 = curtime-duration/2; // 時間は前半から減算されることに注意してください。let begin1 = (begin+end)/2; // 初期量は前半で完了した量に加算される必要があります。return easyOutQuad(curtime1,begin1,end,duration/2); // 変更量と時間は 2 で割られます。
            }
        }
        関数 newCanvas (幅,高さ) {
            bodyEl = document.body とします。
            canvasEl = document.createElement("canvas") とします。
            canvasEl.width = 幅
            canvasEl.height = 高さ
            canvasEl.style.position = "絶対"
            bodyEl.append(キャンバスEl)
            wrap = canvasEl.getContext("2d") とします。
            返品ラップ
        }
        関数setBgcolor(wrap,color){
            wrap.fillStyle=色;
            wrap.fillRect(0,0,wrap.canvas.width,wrap.canvas.height);
        }
        関数 clearBgcolor(wrap){
            wrap.clearRect(0,0,wrap.canvas.width,wrap.canvas.height)
        } 
        関数 newParticle(ラップ、位置、r、色) {
            x = 位置[0]とする
            y = 位置[1]とする
            wrap.fillStyle=色;
            wrap.beginPath();
            wrap.arc(x,y,r,0,2*Math.PI);
            wrap.shadowBlur=20;
            wrap.shadowColor=`rgba(255,255,255,0.8)`;
            wrap.fill();
        }
        関数 fadeOpcity(cur,start,end,dur){
            opcity = parseFloat(easeInoutQuad(cur,start,end,dur).toFixed(2)) とします。 
            返品機会
        }
       wrap0 = newCanvas(1000,800) とします。
       wrap2 = newCanvas(1000,800) とします。
       wrap = newCanvas(1000,800) とします。
       wrap1 = newCanvas(1000,800) とします。
       
        setBgcolor (wrap0、"黒")
        setBgcolor (ラップ、"rgba(0,0,0,0)")
        setBgcolor (wrap1,"rgba(0,0,0,0)")
        setBgcolor (wrap2,"rgba(0,0,0,0)")
        開始位置を[500,200]とします
        r = 10とする
        a = -200とする
        x = a*(1-Math.cos(0))*Math.sin(0)+startPosition[0]とします。
        y = a*(1-Math.cos(0))*Math.cos(0)+startPosition[1]とします。
        関数movePosition(a,g,startPosition){
            t = Math.PI*2/360とします。
            x = a*(1-Math.cos(g*t))*Math.sin(g*t)+startPosition[0]とします。
            y = a*(1-Math.cos(g*t))*Math.cos(g*t)+開始位置[1]とする。
            [x,y]を返す
        }
        関数 intervalMove (speed,g=0) {
            g===720の場合{
                グラム = 360
            }
            g = g + 速度
            次の位置をmovePosition(a,g,startPosition)とします。
            x = 次の位置[0]
            y = 次の位置[1]
            クリア背景色(ラップ1)
            (i =1;i<=360;i++とします){
                g1 = gi/2とする
                g1<0&&g<=360){
                    壊す
                }
                g1Position = movePosition (a,g1,startPosition) とします。
                新しいパーティクル (wrap1、[g1Position[0]、g1Position[1]]、r/(1+i/5)、`rgba(255,200,200,0.5)`)
            }
            setTimeout(()=>{intervalMove(speed,g)},33)
        }

        関数 intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) {
            （fadeOpcity（cur、start、end、dur）===end）の場合{
                カーソル = 0
                temp = 開始する
                開始 = 終了 
                終了 = 一時
            }
            opcity = fadeOpcity(cur,start,end,dur) とします。
            色を `rgba(0,0,0,${opcity})` とします
            クリア背景色(ラップ)
            newParticle (ラップ、[x,y],r,色)
            cur = parseFloat(cur + 0.1)
            setTimeout(()=>{intervalOpcity(現在、開始、終了、継続時間)},33)
        }
間隔機会()
インターバル移動 (1)