js Canvas realisiert zufällige Partikeleffekte

In diesem Artikelbeispiel wird der spezifische Code der zufälligen Partikeleffekte von JS Canvas zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt

Vorwort

Canvas realisiert Front-End-Spezialeffektkunst

Ergebnisse

Code

html

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-kompatibel" content="IE=edge">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
</Kopf>
<Text>
    <script src="./main.js"></script>
</body>
</html>

Haupt-JS

/*          
*Partikelklassenstruktur* Klassenfunktion:
    *1. Initialisierung. Erstellen Sie eine Leinwand, geben Sie Partikeleigenschaften an usw.;
    *2. Bild erstellen und zeichnen *3. Flächenfarbe festlegen *4. Partikelbewegung und Ablenkwinkel */

// Partikel erzeugen let Particle = function(context, options){
    lass random = Math.random();
    dieser.Kontext = Kontext;
    // Die x-Koordinate im Canvas this.x = options.x;
    // y-Koordinate auf der Leinwand this.y = options.y;
    // Nimm die Hälfte der Zufallszahl und vergrößere den Winkel zufällig this.s = 0.5 + Math.random();
    // dies.s = 1 + Math.random();
    // Der sich ändernde Winkel der Partikelbewegung this.a = 0;
    //Breite this.w = window.innerWidth;
    // Höhe this.h = window.innerHeight;
    // Radius dieser.radius = options.radius || 0,5 + Math.random() * 10;
    // Farbe diese.Farbe = Optionen.Farbe || "#E5483F";
    // konsole.log(diese.farbe);
    //Geben Sie an, dass nach 3 Sekunden angerufen werden soll.
    // Wenn der Partikelradius größer als 0,5 ist, neue Partikel hinzufügen.
    setzeTimeout(Funktion(){
        wenn (dieser.radius > 0,5) {
            Partikel.push(
                neues Partikel(Kontext, {
                  x: dies.x,
                  y: dies.y,
                  Farbe: dieser.radius / 2 > 1 ? "#d6433b" : "#FFFFFF",
                  Radius: dieser.radius / 2.2 })
            );
        }
    }.call(Partikel), 3000);
};

// Bild rendern Particle.prototype.render = function() {
        //Starte einen neuen Pfad von (0,0);
        dieser.Kontext.beginPath();
        // Erstellen Sie einen Kurvenbogen this.context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
        // Linienbreite zeichnen this.context.lineWidth = 2;
        //Farbfüllung this.context.fillStyle = this.color;
        // Den Pfad des aktuellen Bildes füllen this.context.fill();
        // Kehren Sie zum Ausgangspunkt zurück und zeichnen Sie die Linie zur Ausgangsposition this.context.closePath();
};

Partikel.prototype.swapColor = Funktion() {
    // Weiß ausschließen if (this.color != "#FFFFFF") {
        // Bestimmen Sie die linke und rechte Schnittstelle und weisen Sie Farbwerte zu, wenn (this.x < this.w / 2) {
            // Linke Hälfte this.color = "#36fcfa";            
        } anders {
            // Rechte Hälfte this.color = "#E5483F";            
        }
        }
    
};

Partikel.prototyp.bewegen = Funktion() {
    // Farbdefinition this.swapColor();

    // Die horizontale Achse wird entsprechend dem Kosinuswinkel transformiert und mit einer Zufallszahl verstärkt;
    // Ablenkwinkel, sodass die beiden Halbgrenzen getrennt sind this.x += Math.cos(this.a) * this.s;
    dies.y += Math.sin(dieses.a) * dies.s;

    // dies.y += Math.cos(dieses.a) * dies.s;
    // dies.x += Math.sin(dieses.a) * dies.s;
    // Nach der Änderung den zufälligen Winkel erneut einnehmen;
    dies.a += Math.random() * 0,8 - 0,4;

    // Wenn alle 0 sind, bewegt sich die horizontale Koordinate des Partikels nicht;
    wenn (dieses.x < 0 || dieses.x > dieses.w - dieser.radius) {
      gibt false zurück;
    }
    // Die Ordinate des Partikels bewegt sich nicht;
    wenn (dieses.y < 0 || dieses.y > dieses.h - dieser.radius) {
      gibt false zurück;
    }

    // Zeichnet das Bild neu this.render();

    gibt true zurück;  
};


let canvas = document.createElement('canvas');
Canvas.Breite = Fenster.Innenbreite – 20;
Leinwandhöhe = Fensterinnenhöhe – 30;
Dokument.Body.InsertBefore(Canvas, null);
let Kontext = Canvas.getContext('2d');

const conf = {
    Frequenz: 50,
    x: Leinwandbreite,
    y: Leinwandhöhe
};

sei Partikel = [],
    Frequenz = Konf.Frequenz;

setzeIntervall(Funktion(){
    bevölkern();
}.bind(null), Frequenz);

Funktion bevölkern(){
    Partikel.push(
        neues Partikel(Kontext, {
          x: conf.x / 2,
          y:conf.y/2
        })
    );

    Rückgabepartikel.Länge;
}

Funktion löschen() {
    Kontext.globalAlpha = 0,04;
    Kontext.Füllstil = "#000042";
    Kontext.fillRect(0,0,Leinwandbreite, Leinwandhöhe);
    Kontext.globalAlpha = 1;
}

Funktion update(){
    Partikel = Partikel.Filter(p => p.Bewegen());
    klar();
    requestAnimationFrame(argumente.callee);
}

aktualisieren();

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

JavaScript + HTML5-Canvas zum Erzielen von Bildfragmentierungs- und Reorganisationsanimationseffekten
js canvas realisiert Sternenhimmel-Hintergrundeffekt
JavaScript-Canvas zum Erzielen von Meteoreffekten
Bringen Sie Ihnen bei, Dutzende von Zeilen JS zu verwenden, um coole interaktive Canvas-Effekte zu erzielen

<<: Detaillierte Erklärung des Unterschieds zwischen chown- und chmod-Befehlen in Linux

>>: Mysql Master-Slave-Synchronisation Last_IO_Errno:1236 Fehlerlösung