js canvas realisiert kreisförmige Wasseranimation
|
In diesem Artikelbeispiel wird der spezifische Code von Canvas zur Realisierung einer kreisförmigen Wasseranimation als Referenz bereitgestellt. Der spezifische Inhalt ist wie folgt VorwortAnzeige von Spezialeffekten Effektanzeige
Code-SchaufensterHauptseite
<!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>
<!-- <link rel="stylesheet" href="style.css" > -->
</Kopf>
<Text>
<script src="main.js"></script>
</body>
</html>Haupt-JS
/*
* Noel Delgado - @pixelia_me
*/
(Funktion() {
var ctx, w, h, cx, cy, PI, PI_HALF, cos, sin, zufällig, Linienbreite, C,
Ringe, Ringlänge, Daten;
ctx = document.createElement('canvas').getContext('2d');
b = 600;
h = 600;
cx = (w / 2);
cy = (h / 2);
Ringe = [];
RingeLänge = 0;
PI = Math.PI;
PI_HALB = PI / 2;
cos = Math.cos;
sin = Math.sin;
zufällig = Math.zufällig;
Linienbreite = 0,2;
C = ["#ABF8FF", "#E76B76", "#1D2439", "#4F3762", "#67F9FF", "#0C0F18"];
Daten = [
/* Ring {t:Gesamtpartikel, r:Radius, d:Entfernung, s:Geschwindigkeit, c:Farbe} */
[
{t:80, r:(cx-10), d:40, s:30, c:C[1]},
{t:60, r:(cx-20), d:40, s:80, c:C[2]},
{t:20, r:(cx-30), d:20, s:80, c:C[2]},
],
[
{t:80, r:(cx-80), d:40, s:40, c:C[4]},
{t:80, r:(cx-90), d:20, s:40, c:C[4]},
{t:20, r:(cx-100), d:20, s:40, c:C[2]},
{t:40, r:(cx-110), d:20, s:40, c:C[2]},
],
[
{t:60, r:(cx-160), d:40, s:20, c:C[2]},
{t:20, r:(cx-170), d:30, s:60, c:C[2]},
{t:40, r:(cx-180), d:40, s:60, c:C[2]},
],
[
{t:40, r:(cx-230), d:40, s:20, c:C[5]},
{t:20, r:(cx-240), d:20, s:10, c:C[5]},
],
[
{t:10, r:(cx-290), d:10, s:10, c:C[4]}
]
];
/* */
ctx.canvas.width = b;
ctx.canvas.height = h;
Dokument.Body.AnhängenUntergeordnetesElement(ctx.canvas);
data.forEach(Funktion(Gruppe) {
var ring = [];
Gruppe.fürJedes(Funktion(Orbit, i) {
var Gesamtpartikel, Index;
Gesamtpartikel = Umlaufbahn.t;
Index = 0;
für (; index < total_particles; index++) {
var Radius, Entfernung, Geschwindigkeit, Farbe, Opazität;
Radius = Umlaufbahn.r;
Entfernung = Umlaufbahn.d;
Geschwindigkeit = zufällig() / Umlaufbahn.s;
Geschwindigkeit = i % 2? Geschwindigkeit : Geschwindigkeit * -1;
Farbe = orbit.c;
Opazität = orbit.o;
ring.push(neues P(Radius, Entfernung, Geschwindigkeit, Farbe, Deckkraft));
Radius = Entfernung = Geschwindigkeit = Farbe = Deckkraft = null;
}
});
Ringe.drücken(Ring);
});
RingeLänge = Ringe.Länge;
/* */
Funktion P(Radius, Entfernung, Geschwindigkeit, Farbe) {
dies.a = PI / 180;
this.d = Entfernung;
dies.d2 = (dieses.d * dies.d);
dies.x = cx + radius * cos(dies.a);
dies.y = cy + radius * sin(dies.a);
dies.c = Farbe;
dies.r = (random() * 8);
dies.R = random() > 0,5? Radius: Radius - 5;
this.s = Geschwindigkeit;
diese.pos = random() * 360;
}
Funktion zeichnen() {
var i, j, k, xd, yd, d, Ring, Ringlänge, Ringlänge2, Partikel, p2;
ctx.beginPath();
ctx.globalCompositeOperation = "Quelle-over";
ctx.rect(0, 0, b, h);
ctx.fillStyle = "#151a28";
ctx.fill();
ctx.closePath();
für (i = 0; i < Ringlänge; i++) {
ring = Ringe[i];
Ringlänge = Ringlänge;
Ringlänge2 = Ringlänge - 100;
für (j = 0; j < Ringlänge; j++) {
Teilchen = Ring[j];
Partikel.x = cx + Partikel.R * sin(PI_HALF + Partikel.pos);
Partikel.y = cy + Partikel.R * cos(PI_HALF + Partikel.pos);
Partikel.pos += Partikel.s;
ctx.beginPath();
ctx.globalAlpha = 0,12;
ctx.globalCompositeOperation = "leichter";
ctx.fillStyle = Partikel.c;
ctx.arc(Partikel.x, Partikel.y, Partikel.r, PI * 2, falsch);
ctx.fill();
ctx.closePath();
für (k = 0; k < Ringlänge2; k++) {
p2 = Ring[k];
yd = p2.y - Teilchen.y;
xd = p2.x - Teilchen.x;
d = ((xd * xd) + (yd * yd));
wenn (d < Partikel.d2) {
ctx.beginPath();
ctx.globalAlpha = 1;
ctx.lineWidth = Linienbreite;
ctx.moveTo(Partikel.x, Partikel.y);
ctx.lineTo(p2.x, p2.y);
ctx.strokeStyle = p2.c;
ctx.stroke();
ctx.closePath();
}
}
}
}
}
Funktion Schleife() {
ziehen();
requestAnimationFrame(Schleife);
}
Schleife();
})();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:
|
<<: Verwenden Sie die Befehle more, less und cat in Linux, um Dateiinhalte anzuzeigen
>>: MySQL-Optimierung: Join statt Unterabfrage verwenden
Artikel empfehlen
Lösung für falsche Zeichenfolgenwerte in MySQL
Viele Freunde berichten von folgendem Fehler, wen...
Lösung für das Vue-Routing: Diese Seite mit dem Sprung „this.route.push“ wird nicht aktualisiert
Die Vue-Routing-Seite this.route.push wird nicht ...
Zusammenfassung gängiger Fehler beim Entwurf von MySQL-Tabellen
Inhaltsverzeichnis Fehler 1: Zu viele Datenspalte...
Implementierung der MySQL-Datendesensibilisierung (Telefonnummer, ID-Karte)
1. Erklärung zur Datendesensibilisierung Bei den ...
Detaillierte Erklärung des TS-Objekt-Spread-Operators und des Rest-Operators
Inhaltsverzeichnis Überblick Objektrestattribut E...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.11 Neue Kennwortauthentifizierungsmethode für MySQL 8.0
In diesem Artikel finden Sie das grafische Tutori...
Detaillierte Erklärung zur Verwendung von this.$set in Vue
Inhaltsverzeichnis Verwendung von this.$set in Vu...
Schreiben Sie ein Publish-Subscribe-Modell mit JS
Inhaltsverzeichnis 1. Szeneneinführung 2 Code-Opt...
CSS3-Textanimationseffekte
Wirkung html <div Klasse="sp-container&qu...
Die Fallstricke und Lösungen, die durch den Standardwert von sql_mode in MySQL 5.7 verursacht werden
Während der normalen Projektentwicklung, wenn die...
Responsive Webdesign lernen (3) - So verbessern Sie die Leistung von Webseiten auf Mobilgeräten
Vorwort Aufgrund von Bandbreitenbeschränkungen un...
Detaillierte Erläuterung des Aufbaus und der Schnittstellenverwaltung des Docker Private Warehouse
1. Über die Registrierung Der offizielle Docker-H...
js zur Realisierung von Login- und Registrierungsfunktionen
In diesem Artikelbeispiel wird der spezifische Co...
Eine kurze Diskussion darüber, ob MySQL eine Funktion ähnlich der nvl von Oracle haben kann
Verwenden Sie ifnull statt isnull isnull wird ver...
So stellen Sie die LNMP-Architektur im Docker bereit
Umweltanforderungen: IP Hostname 192.168.1.1 Knot...