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

Eine einfache Strategie zur ID-Generierung: Implementierung der Generierung einer global eindeutigen ID aus einer MySQL-Tabelle

Es gibt viele Möglichkeiten, eine globale ID zu g...

Ein Tutorial zur Installation, Verwendung und automatischen Kompilierung von TypeScript

1. Einführung in TypeScript Im vorherigen Artikel...

Zusammenfassung des Umschaltproblems und der Lösung zur Installation mehrerer JDK-Versionen im 64-Bit-System von Win10

Da myeclipse2017 und idea2017 auf dem Computer in...

Konvertierung von virtuellem Dom in reales Dom mit Vue

Es gibt eine andere Baumstruktur Javascript-Objek...

Ubuntu-Installation Matlab2020b, ausführliches Tutorial und Ressourcen

Inhaltsverzeichnis 1. Ressourcendateien 2. Instal...

Häufige Probleme bei der Implementierung der Fortschrittsbalkenfunktion von vue Nprogress

NProgress ist der Fortschrittsbalken, der oben im...

Eine neue CSS-Bildersatztechnik (Hintergrundanzeige und Textverschiebung vom Bildschirm), um 9999 Pixeln Lebewohl zu sagen

Die -9999-Pixel-Bildersetzungstechnologie ist seit...

Eine kurze Diskussion zur Logikextraktion und Feldanzeige von Vue3 in Projekten

Inhaltsverzeichnis Logische Schichtung Trennen Si...

Zusammenfassung häufig verwendeter SQL-Anweisungen zum Erstellen von MySQL-Tabellen

Ich habe kürzlich an einem Projekt gearbeitet und...

Grundlegende Verwendung von benutzerdefinierten Anweisungen in Vue

Inhaltsverzeichnis Vorwort Text 1. Globale Regist...

Lösung für das Problem, dass die virtuelle Maschine Ubuntu 16.04 keine Verbindung zum Internet herstellen kann

Ich habe gerade Ubuntu installiert und als ich es...

Implementierung neuer Probleme mit CSS3-Selektoren

Inhaltsverzeichnis Grundlegende Selektorerweiteru...

Lösung zur automatischen Beendigung von Docker Run-Containern

Heute ist bei mir ein Problem aufgetreten, als ic...

Zusammenfassung der Wissenspunkte zu MySQL-Index, Sperre und Transaktion

Dieser Artikel fasst die Wissenspunkte zu MySql-I...

CSS implementiert einen Popup-Fenstereffekt mit einer Maskenebene, die geschlossen werden kann

Popup-Fenster werden in der tatsächlichen Entwick...