Beispiel für den schwebenden Balleffekt einer Leinwandzeichnung

Kürzlich habe ich auf Blockchain-Informationen geachtet, bin herumgewandert und habe zufällig die Wirkung der Homepage dieser Website gesehen. Es handelt sich um einen Haufen schwebender Bälle. Die Maus kann mit der Kugel auch eine Abtastlinie erstellen. Das Folgende wird mit Leinwand erstellt.

Origineller Effekt

Wirkung erzielen

Ich hatte schon viel Kontakt mit SVG und weiß, dass Canvas auch sehr leistungsstarke Rendering-Effekte erzielen kann, aber es gab noch nie ein Nutzungsszenario, das mir die Möglichkeit gab, damit anzufangen, also habe ich vor, es dieses Mal selbst auszuprobieren .

Darüber hinaus interessiere ich mich dafür, weil ich zum einen visuelle Effekte mag und zum anderen, weil mir das Gefühl gefällt, die physische Welt wie eine Spiel-Engine zu simulieren. Stellen Sie sich einfach vor, dass diese Bälle miteinander kollidieren , oder eine Gravitationsabstoßung untereinander haben oder den Faktor der Schwerkraft erhöhen. Diese Animation kann auch viel Fantasie eröffnen.

Sehen Sie sich hier das Github-Repo an.

Die Zeichenanweisungen von Canvas sind den Anweisungen in SVG sehr ähnlich, sehr einfach.

 ctx.beginPath();ctx.arc(this.center.x, this.center.y, this.radius, 0, 2 * Math.PI);ctx.fill();

beginPath startet einen Pfad, arc zeichnet einen Kreis und füllt ihn mit Farbe.

 ctx.beginPath();ctx.moveTo(from.x, from.y);ctx.lineTo(to.x, to.y);ctx.Stroke();

In ähnlicher Weise startet beginPath einen Pfad, moveTo bewegt den Pinsel zum Startpunkt, lineTo zeichnet die Linie zum Endpunkt und streicht Striche.

Um die Leinwand im Vollbildmodus zu halten, setzen Sie einfach die Breite und Höhe der Leinwand zurück, wenn Sie das Fenster laden oder die Größe ändern.

 var canvas = document.getElementById(canvas); function resizeCanvas() { canvas.width = window.innerWidth;}window.onload = window.onresize = resizeCanvas;

Einfache Animationen erleichtern mir den Einstieg.

Vier Schritte zum Erstellen einer Animation:

1. Löschen Sie den Canvas-Inhalt, normalerweise mit clearRect()
2. Canvas-Status speichern
3. Inhalte zeichnen
4. Canvas-Status zurücksetzen

Was ich gemacht habe, ist relativ einfach, ich habe nur 1 und 3 verwendet, was darin besteht, die Leinwand ständig zu räumen und sie dann neu zu zeichnen.

 window.onload = function () { resizeCanvas(); window.requestAnimationFrame(draw);};function cleanCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height);}function draw() { cleanCanvas (); // Sachen zeichnen. window.requestAnimationFrame(draw);}

Drei sind verfügbar:

1. window.setInterval() Wenn überhaupt keine Benutzerinteraktion und nur ein ständiges Neuzeichnen erforderlich ist, reicht dies aus.
2. window.setTimeout() Wenn Sie möchten, dass Benutzeroperationen wie Tastatur und Maus die Animation beeinflussen, können Sie dies verwenden (ich verstehe nicht, ist requestAnimationFrame nicht besser?)
3. window.requestAnimationFrame () teilt dem Browser mit, was vor dem nächsten Neuzeichnen zu tun ist, dh Ihr eigener benutzerdefinierter Zeichenvorgang.

Dieses Beispiel in MDN ist ziemlich cool. Es kann verschoben werden, und das Folgende ist nur ein Screenshot.

Ich habe schon einige Spiele-Engine-Entwicklungen gesehen und bewusst eine objektorientierte Kapselung vorgenommen. Was hier verwendet wird, ist sehr einfach.

Das Grundlegendste ist, dass der Vektor einen Punkt/Vektor in einem zweidimensionalen Raum darstellt und seine Mitglieder nur x und y sind.

Auf dieser Basis repräsentiert Circle einen Kreis, Member Center: Vector repräsentiert den Mittelpunkt des Kreises, Radius: Number repräsentiert den Radius und Speed: Vector repräsentiert die Geschwindigkeit.

Dann kapseln Sie einfach einige Mitgliedsfunktionen für Ihren eigenen Gebrauch.

TypeScript + Webpack + Webpack-dev-server ist nicht kompliziert, beziehen Sie sich einfach auf den folgenden Inhalt:

1. Webpack/Erste Schritte
2. Webpack/Typescript
3. Webpack/devServer
4. Webpack-Dev-Server

Darüber hinaus habe ich auch npx ausprobiert, das zum Ausführen von npm-ausführbaren Programmen verwendet wird. In der Vergangenheit wurde Webpack global installiert, und Sie konnten Webpack xx einfach direkt aufrufen, indem Sie ./node_modules/ aufrufen. .bin/webpack Um lokales Webpack auszuführen, können Sie jetzt npx webpack xxx verwenden.

In der Konfiguration von devServer habe ich hot: true hinzugefügt, um das Hot-Update zu aktivieren. Daraufhin wurde auf der Webseite Folgendes angezeigt: [HMR] Hot Module Replacement ist deaktiviert.

Ich habe festgestellt, dass es eine alte Falle ist. Wenn ich es aufrufen muss, füge ich die Befehlszeilenparameter hinzu: webpack-dev-server --hot --inline

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.