So verwenden Sie die ES6-Klassenvererbung, um einen wunderschönen Balleffekt zu erzielen

So verwenden Sie die ES6-Klassenvererbung, um einen wunderschönen Balleffekt zu erzielen

einführen

Dieser Effekt wird mit Canvas gezeichnet und dann mithilfe der Klassenvererbung implementiert. Wenn sich die Maus an die angegebene Canvas-Position bewegt, wird an der aktuellen Mausposition ein kleiner Ball in zufälliger Farbe erzeugt, der dann langsam verschwindet.

Wirkungsdiagramm

Implementierungsschritte

  • HTML schreiben
  • Erstellen einer Canvas-Umgebung
  • Schreibball
  • Implementieren Sie die MoveBall-Klasse, die die Ball-Klasse erbt
  • Instanziieren Sie den Ball

HTML-Struktur

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Schöne Bälle</title>
    <Stil>
        #Leinwand{
            Rand links: 100px
        }
    </Stil>
</Kopf>
<Text>
    <canvas id="canvas">Ihr Browser unterstützt Canvas nicht</canvas>

    <!-- <script src="./underscore-min.js"></script> -->
    <!-- Underscore hat bereits eine gepackte _.random-Funktion. Sie müssen keine Zufallsfunktion manuell schreiben, indem Sie sie importieren. -->
    <script src="./index.js"></script>
</body>
</html>

Erstellen einer Canvas-Umgebung

 // index.js
 
 // 1. Aktuelle Leinwand abrufen const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
  
 // Leinwandgröße festlegen Stil canvas.width = 1000;
 Leinwandhöhe = 600;
 Leinwand.Stil.Hintergrundfarbe = "#000"

Beispielanalyse

Suchen Sie zuerst das Canvas-Element:

const canvas = document.getElementById("myCanvas");

Erstellen Sie dann das Kontextobjekt:

const ctx = canvas.getContext('2d');

Legen Sie die Hintergrundfarbe für Breite und Höhe fest

Schreibball

// index.js

 // 2. Ball Klasse Klasse Ball {
     Konstruktor (x, y, Farbe) {
         this.x = x; // x-Achse this.y = y; // y-Achse this.color = color; // Farbe des Balls this.r = 40; // Radius des Balls }
 
     // Zeichne den Ball render () {
         ctx.speichern();
         ctx.beginPath();
         ctx.arc(dieses.x, dies.y, dies.r, 0, Math.PI * 2);
         ctx.fillStyle = diese.Farbe;
         ctx.fill();
         ctx.wiederherstellen();
     }
 }

Beispielanalyse

  • Sie können sehen, dass es eine Methode „constructor()“ gibt, bei der es sich um die Konstruktionsmethode handelt, und dass das Schlüsselwort „this“ das Instanzobjekt darstellt.
  • save() ---- Speichert den aktuellen Zustand der Umgebung
  • beginPath() ---- Einen Pfad starten oder den aktuellen Pfad zurücksetzen
  • arc() ---- wird verwendet, um Bögen/Kurven zu erstellen (wird verwendet, um Kreise oder Teilkreise zu erstellen) -- die Parameter sind wie folgt
Parameter beschreiben
X Die x-Koordinate des Kreismittelpunkts.
j Die Y-Koordinate des Kreismittelpunkts.
R Der Radius des Kreises.
sWinkel Der Startwinkel im Bogenmaß (die Drei-Uhr-Position des Kreisbogens beträgt 0 Grad).
eWinkel Der Endwinkel im Bogenmaß.
gegen den Uhrzeigersinn Optional. Gibt an, ob gegen den Uhrzeigersinn oder im Uhrzeigersinn gezeichnet werden soll. Falsch = im Uhrzeigersinn, Wahr = gegen den Uhrzeigersinn.
  • fillStyle() ---- Legt die Farbe, den Farbverlauf oder das Muster fest, mit dem ein Gemälde gefüllt wird, oder gibt diese zurück.
  • fill() ---- Füllt die aktuelle Zeichnung (den Pfad)
  • restore() ---- Gibt den zuvor gespeicherten Pfadstatus und die Eigenschaften zurück.

Implementieren Sie die MoveBall-Klasse, die die Ball-Klasse erbt

// index.js

// 3. Klasse die den Ball bewegt class MoveBall extends Ball { // Erbt Konstruktor (x, y, color) {
        super(x, y, Farbe);

        // Änderung der Menge // Zufällige Koordinaten des Balls this.dX = Random(-5, 5);
        dies.dY = Zufallsprinzip(-5, 5);
        // Zufallszahl für abnehmenden Radius, da der Ball zuerst groß ist und dann langsam verschwindet. this.dR = Random(1, 3);
    }

    // 4. Ändere die Position und den Radius des Balles upDate () {
        dies.x += dies.dX;
        dies.y += dies.dY;
        dies.r -= dies.dR;
        // Bestimmen Sie, ob der Radius des Balls kleiner als 0 ist
        wenn(dies.r < 0) {
            this.r = 0 // Ein Radius von 0 bedeutet, dass der Ball verschwindet}
    }
}

Beispielanalyse

  • Hier wird eine MoveBall-Klasse definiert, die über das Schlüsselwort extends alle Eigenschaften und Methoden der Ball-Klasse erbt.
  • Das Schlüsselwort super, das hier den Konstruktor der übergeordneten Klasse darstellt, wird verwendet, um ein neues this-Objekt der übergeordneten Klasse zu erstellen. Die Unterklasse muss die Supermethode in der Konstruktormethode aufrufen, sonst wird beim Erstellen einer neuen Instanz ein Fehler gemeldet. Dies liegt daran, dass das eigene this-Objekt der Unterklasse zuerst vom Konstruktor der übergeordneten Klasse geformt werden muss, um dieselben Instanzeigenschaften und -methoden wie die übergeordnete Klasse zu erhalten, und dann mit den eigenen Instanzeigenschaften und -methoden der Unterklasse verarbeitet und ergänzt werden muss. Wenn die Supermethode nicht aufgerufen wird, erhält die Unterklasse dieses Objekt nicht. (Klicken Sie hier für Details)
  • Der Zweck der upDate-Methode besteht darin, die Position und den Radius des Balls zu ändern und je nach Position der Maus unterschiedliche Änderungen vorzunehmen

Instanziieren Sie den Ball

// index.js

// 5. Instanziieren Sie den Ball // Speichern Sie den generierten Ball let ballArr = [];

// Zufallsfunktion definieren Wenn Sie auf underscore-min.js verweisen, müssen Sie keine Zufallsfunktion schreiben, sondern können direkt _.random verwenden
lass Random = (min, max) => {
    gibt Math.floor(Math.random() * (max - min) + min) zurück;
}

// Auf Mausbewegungen achten canvas.addEventListener('mousemove', function (e){
    // Zufällige Farben // Sie können auch ein festes Farbarray verwenden let colorArr = ['rot', 'grün', 'blau', 'gelb', 'orange', 'pink'];
    // Hintergrundfarbe ==> FarbeArr[Zufällig(0, FarbeArr.Länge - 1)]
    Lassen Sie bgColor = `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
    ballArr.push(neuer MoveBall(e.offsetX, e.offsetY, bgColor));
    Konsole.log(ballArr);
})

//Starte den Timer setInterval(function () {

    // Bildschirm löschen ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Zeichne den Ball für (let i = 0 ; i < ballArr.length; i++ ) {
        ballArr[i].render();
        ballArr[i].upDate();
    }
}, 50);

Beispielanalyse

  • Habe eine Zufallsfunktion zum Generieren von zufälligen Farben geschrieben
  • Hören Sie auf die Bewegung der Maus, um einen sich bewegenden Ball zu erstellen, und schieben Sie ihn dann in das Array, in dem die Bälle gespeichert sind. Auf diese Weise verfügen die Bälle im Array über Render- und Aktualisierungsmethoden. Rufen Sie abschließend nacheinander die Rendermethode der Ball-Klasse auf, um sie zu zeichnen, und rufen Sie die Aktualisierungsmethode von MoveBall auf. Jetzt kommt die Wirkung zum Vorschein!
  • Löschvorgang „clearRect“ – Löscht die angegebenen Pixel innerhalb des angegebenen Rechtecks ​​(klicken Sie für Details). Sehen Sie sich das Bild unten an, um die Auswirkungen zu sehen, wenn der Bildschirm nicht gelöscht wird

Wir können sehen, dass der Radius des Balls, der den Bildschirm nicht verlässt, allmählich kleiner wird, aber der Ball verschwindet am Ende nicht. Das ist definitiv nicht der Effekt, den wir wollen! Welchen Effekt hat das Löschen des Bildschirms? Es ist der Effekt vom Anfang des Artikels! (Baby, hab Spaß❤)

index.js vollständiger Code

// 1. Aktuelle Leinwand abrufen const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// Leinwandgröße festlegen Stil canvas.width = 1000;
Leinwandhöhe = 600;
Leinwand.Stil.Hintergrundfarbe = "#000"

// 2. Ball Klasse Klasse Ball {
    Konstruktor (x, y, Farbe) {
        dies.x = x;
        dies.y = y;
        diese.farbe = Farbe;
        dies.r = 40;
    }

    // Zeichne den Ball render () {
        ctx.speichern();
        ctx.beginPath();
        ctx.arc(dieses.x, dies.y, dies.r, 0, Math.PI * 2);
        ctx.fillStyle = diese.Farbe;
        ctx.fill();
        ctx.wiederherstellen();
    }

}

// 3. Klasse die den Ball bewegt class MoveBall extends Ball { // Erbt Konstruktor (x, y, color) {
        super(x, y, Farbe);

        // Änderung der Menge // Zufällige Koordinaten des Balls this.dX = Random(-5, 5);
        dies.dY = Zufallsprinzip(-5, 5);
        // Zufallszahl mit kleinerem Radius this.dR = Random(1, 3);
    }

    // 4. Ändere die Position und den Radius des Balles upDate () {
        dies.x += dies.dX;
        dies.y += dies.dY;
        dies.r -= dies.dR;
        // Bestimmen Sie, ob der Radius des Balls kleiner als 0 ist
        wenn(dies.r < 0) {
            dies.r = 0
        }
    }

}

// 5. Instanziieren Sie den Ball // Speichern Sie den generierten Ball let ballArr = [];

// Zufallsfunktion definieren Wenn Sie auf underscore-min.js verweisen, müssen Sie keine Zufallsfunktion schreiben, sondern können direkt _.random verwenden
lass Random = (min, max) => {
    gibt Math.floor(Math.random() * (max - min) + min) zurück;
}

// Auf Mausbewegungen achten canvas.addEventListener('mousemove', function (e){
    // Zufällige Farben // Sie können auch ein festes Farbarray verwenden let colorArr = ['rot', 'grün', 'blau', 'gelb', 'orange', 'pink'];
    // Hintergrundfarbe ==> FarbeArr[Zufällig(0, FarbeArr.Länge - 1)]
    Lassen Sie bgColor = `rgb(${Random(0,256)}, ${Random(0,256)}, ${Random(0,256)})`;
    ballArr.push(neuer MoveBall(e.offsetX, e.offsetY, bgColor));
    Konsole.log(ballArr);
})

//Starte den Timer setInterval(function () {

    // Bildschirm löschen ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Zeichne den Ball für (let i = 0 ; i < ballArr.length; i++ ) {
        ballArr[i].render();
        ballArr[i].upDate();
    }
}, 50);

Zusammenfassen

Ich hoffe, diese kleine Demo kann Ihnen dabei helfen, sich mit dem Verständnis und der Verwendung von Klassen in ES6 vertraut zu machen. Dies ist das Ende dieses Artikels darüber, wie Sie mithilfe der ES6-Klassenvererbung den Effekt wunderschöner kleiner Bälle erzielen können. Weitere relevante Inhalte zur ES6-Klassenvererbung zum Erzielen kleiner Bälle finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Analyse der Konzepte und Nutzung neuer ES6-Funktionen wie Class und Extends
  • Detailliertes Beispiel für die Verwendung von Klassenvererbung in ES6-JavaScript
  • Detaillierte Erläuterung der Vererbung, Instanziierung und des React-Super-(Props-)Prinzips der ES6-Klassenkette

<<:  Zusammenfassung der Verwendung von Linux-SFTP-Befehlen

>>:  Beispieloperation für die Summe des Mysql-Varchar-Typs

Artikel empfehlen

Detaillierte Erläuterung der Verwendung von Redux bei der nativen WeChat-Applet-Entwicklung

Prämisse In komplexen Szenarien müssen große Date...

Ein kurzer Vortrag über den Diff-Algorithmus in Vue

Inhaltsverzeichnis Überblick Virtueller Dom Prinz...

JavaScript zum Erzielen eines einfachen Countdown-Effekts

In diesem Artikelbeispiel wird der spezifische Co...

Lösung für Primärschlüsselkonflikte, wenn innodb_index_stats beim Importieren von Sicherungsdaten einen Fehler meldet

Fehlerbeschreibung percona5.6, mysqldump vollstän...

So installieren Sie Nginx in Docker

Installieren Sie Nginx auf Docker Nginx ist ein l...

Videojs+Swiper realisiert Taobao-Produktdetailkarussell

In diesem Artikel wird der spezifische Code von v...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 sowie zur Kennwortänderung unter Linux

Ich habe diesen Blog geschrieben, um mich daran z...

Zusammenfassung wichtiger Komponenten von MySQL InnoDB

Innodb umfasst die folgenden Komponenten 1. innod...

Detaillierte Erläuterung der 6 Möglichkeiten der JS-Vererbung

Vererbung von Prototypketten Die Prototypenvererb...

Detaillierte Erläuterung der Verwendung des Nginx-Reverse-Proxys zur Lösung domänenübergreifender Probleme

Frage Im vorherigen Artikel zur domänenübergreife...

Das WeChat-Applet zeichnet die Bewegungsbahn des Benutzers auf

Inhaltsverzeichnis Konfiguration hinzufügen JSON-...

Standard-CSS-Stil der XHTML-Sprache

html,Adresse, Blockzitat, Körper, dd, div, dl,dt,...

Detailliertes Beispiel zum Abrufen des Maximalwerts jeder Gruppe nach der Gruppierung in MySQL

Detailliertes Beispiel zum Abrufen des Maximalwer...

HTML+CSS zum Hinzufügen eines Löschkreuzes und einer Bildlöschschaltfläche in der oberen rechten Ecke des Bildes

Zur Aufzeichnung: Es kann in Zukunft verwendet we...

Installieren und Konfigurieren von MySQL unter Linux

System: Ubuntu 16.04LTS 1\Laden Sie mysql-5.7.18-...