JavaScript-Canvas zum Erzielen von Meteoreffekten

Funktion easeInQuad(aktuelle Zeit, Beginn, Ende, Dauer){
            let x = curtime/duration; //x-Wertlet y = x*x; //y-Wertreturn begin+(end-begin)*y; //füge die ursprüngliche Formel ein}
        //Kernfunktion der langsamen Verzögerungsbewegung, konstruiert mit der Quadratwurzel: x*x + 2*x
Funktion easeOutQuad(aktuelle Zeit, Beginn, Ende, Dauer){
            let x = curtime/duration; //x-Wertlet y = -x*x + 2*x; //y-Wertreturn begin+(end-begin)*y; //füge die ursprüngliche Formel ein}
Funktion easeInoutQuad(aktuelle Zeit, Beginn, Ende, Dauer){
            if(curtime<duration/2){ //Erste Hälfte der Zeit return easeInQuad(curtime,begin,(begin+end)/2,duration/2); //Änderungsbetrag und Zeit werden durch 2 geteilt
            }anders{
                let curtime1 = curtime-duration/2; //Beachten Sie, dass die Zeit von der ersten Hälfte abgezogen werden sollte let begin1 = (begin+end)/2; //Die Anfangsmenge sollte zur in der ersten Hälfte abgeschlossenen Menge addiert werden return easeOutQuad(curtime1,begin1,end,duration/2); //Die Änderungsmenge und die Zeit werden durch 2 geteilt
            }
}

Funktion IntervallOpcity (aktuell=0,Start=0,3,Ende=0,8,Dauer=3) {
            wenn (fadeOpcity(aktuell,Start,Ende,Dauer)===Ende){
                aktuell = 0
                lass temp = start
                Anfang = Ende 
                Ende = temp
            }
            let opcity = fadeOpcity(aktuell,Start,Ende,Dauer)
            lass Farbe = `rgba(0,0,0,${opcity})`
            Hintergrundfarbe löschen (Umbruch)
            neuesPartikel (Wrap, [x, y], r, Farbe)
            aktuell = parseFloat(aktuell + 0,1)
            setTimeout(()=>{Intervallbetrieb (aktuell,Start,Ende,Dauer)},33)
}

Funktion IntervallBewegung (Geschwindigkeit,g=0) {
            wenn(g===720){
                g = 360
            }
            g = g + Geschwindigkeit
            let nächstePosition = movePosition(a,g,startPosition)
            x = nächstePosition[0]
            y = nächstePosition[1]
            Hintergrundfarbe löschen(Wrap1)
            für (lass i =1;i<=360;i++){
                sei g1 = gi/2
                wenn(g1<0&&g<=360){
                    brechen
                }
                let g1Position = movePosition (a, g1, startPosition)
                neuesPartikel (Wrap1, [g1Position[0], g1Position[1]], r/(1+i/5),`rgba(255,200,200,0,5)`)
            }
            setTimeout(()=>{Intervallbewegung (Geschwindigkeit,g)},33)
        }

Funktion easeInQuad(aktuelle Zeit, Beginn, Ende, Dauer){
            let x = curtime/duration; //x-Wertlet y = x*x; //y-Wertreturn begin+(end-begin)*y; //füge die ursprüngliche Formel ein}
        //Kernfunktion der langsamen Verzögerungsbewegung, konstruiert mit der Quadratwurzel: x*x + 2*x
        Funktion easeOutQuad(aktuelle Zeit, Beginn, Ende, Dauer){
            let x = curtime/duration; //x-Wertlet y = -x*x + 2*x; //y-Wertreturn begin+(end-begin)*y; //füge die ursprüngliche Formel ein}
        Funktion easeInoutQuad(aktuelle Zeit, Beginn, Ende, Dauer){
            if(curtime<duration/2){ //Erste Hälfte der Zeit return easeInQuad(curtime,begin,(begin+end)/2,duration/2); //Änderungsbetrag und Zeit werden durch 2 geteilt
            }anders{
                let curtime1 = curtime-duration/2; //Beachten Sie, dass die Zeit von der ersten Hälfte abgezogen werden sollte let begin1 = (begin+end)/2; //Die Anfangsmenge sollte zur in der ersten Hälfte abgeschlossenen Menge addiert werden return easeOutQuad(curtime1,begin1,end,duration/2); //Die Änderungsmenge und die Zeit werden durch 2 geteilt
            }
        }
        Funktion newCanvas (Breite,Höhe) {
            let bodyEl = Dokument.body
            let canvasEl = document.createElement("canvas")
            canvasEl.width = Breite
            canvasEl.height = Höhe
            canvasEl.style.position = "absolut"
            bodyEl.anhängen(canvasEl)
            let wrap = canvasEl.getContext("2d")
            Rücksendeverpackung
        }
        Funktion setBgcolor (Wrap, Farbe) {
            Wrap.Füllstil=Farbe;
            wrap.fillRect(0,0,wrap.canvas.Breite,wrap.canvas.Höhe);
        }
        Funktion Hintergrundfarbe löschen(Umbruch){
            Wrap.ClearRect(0,0,Wrap.Canvas.Breite,Wrap.Canvas.Höhe)
        } 
        Funktion neuesPartikel(Wrap,Position,r,Farbe) {
            sei x = Position[0]
            sei y = Position[1]
            Wrap.Füllstil=Farbe;
            } wrap.beginPath();
            Wrap.Arc(x,y,r,0,2*Math.PI);
            Wrap.Schattenunschärfe = 20;
            wrap.shadowColor=`rgba(255,255,255,0.8)`;
            umbrechen.füllen();
        }
        Funktion fadeOpcity(aktuell,Start,Ende,Dauer){
            let opcity = parseFloat(easeInoutQuad(aktuell,start,end,dur).toFixed(2)) 
            Rückgabeoption
        }
       let wrap0 = newCanvas(1000,800)
       let wrap2 = newCanvas(1000,800)
       let wrap = neueLeinwand(1000,800)
       let wrap1 = newCanvas(1000,800)
       
        setBgcolor (Wrap0, "schwarz")
        setBgcolor (Umbruch,"rgba(0,0,0,0)")
        setBgcolor (Wrap1, "rgba (0,0,0,0)")
        setBgcolor (Wrap2, "rgba (0,0,0,0)")
        let startPosition = [500,200]
        sei r = 10
        sei a = -200
        sei x = a*(1-Math.cos(0))*Math.sin(0)+startPosition[0]
        sei y = a*(1-Math.cos(0))*Math.cos(0)+startPosition[1]
        Funktion Verschiebeposition (a,g,Startposition) {
            sei t = Math.PI*2/360
            sei x = a*(1-Math.cos(g*t))*Math.sin(g*t)+startPosition[0]
            sei y = a*(1-Math.cos(g*t))*Math.cos(g*t)+startPosition[1]
            Rückgabewert [x,y]
        }
        Funktion IntervallBewegung (Geschwindigkeit,g=0) {
            wenn(g===720){
                g = 360
            }
            g = g + Geschwindigkeit
            let nächstePosition = movePosition(a,g,startPosition)
            x = nächstePosition[0]
            y = nächstePosition[1]
            Hintergrundfarbe löschen(Wrap1)
            für (lass i =1;i<=360;i++){
                sei g1 = gi/2
                wenn(g1<0&&g<=360){
                    brechen
                }
                let g1Position = movePosition (a, g1, startPosition)
                neuesPartikel (Wrap1, [g1Position[0], g1Position[1]], r/(1+i/5),`rgba(255,200,200,0,5)`)
            }
            setTimeout(()=>{Intervallbewegung (Geschwindigkeit,g)},33)
        }

        Funktion IntervallOpcity (aktuell=0,Start=0,3,Ende=0,8,Dauer=3) {
            wenn (fadeOpcity(aktuell,Start,Ende,Dauer)===Ende){
                aktuell = 0
                lass temp = start
                Anfang = Ende 
                Ende = temp
            }
            let opcity = fadeOpcity(aktuell,Start,Ende,Dauer)
            lass Farbe = `rgba(0,0,0,${opcity})`
            Hintergrundfarbe löschen (Umbruch)
            neuesPartikel (Wrap, [x, y], r, Farbe)
            aktuell = parseFloat(aktuell + 0,1)
            setTimeout(()=>{Intervallbetrieb (aktuell,Start,Ende,Dauer)},33)
        }
IntervallOpcity()
IntervallBewegung (1)