js canvas realisiert kreisförmige Wasseranimation

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

Vorwort

Anzeige von Spezialeffekten

Effektanzeige

Code-Schaufenster

Hauptseite

<!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:
  • Js Texthintergrundlinie wie fließendes Wasser Spezialeffekt
  • Javascript-Animation Kreisbewegung, die sich wie ein Ball um die Maus bewegt

<<:  Verwenden Sie die Befehle more, less und cat in Linux, um Dateiinhalte anzuzeigen

>>:  MySQL-Optimierung: Join statt Unterabfrage verwenden

Artikel empfehlen

Stabile Version von MySQL 8.0.18 veröffentlicht! Hash Join ist wie erwartet da

Die stabile Version (GA) von MySQL 8.0.18 wurde g...

MySQL-Grundlagen-Tutorial: Detaillierte Erklärung der DML-Anweisungen

Inhaltsverzeichnis DML-Anweisungen 1. Datensätze ...

Probleme und Lösungen für MYSQL5.7.17-Verbindungsfehler unter MAC

Das Problem, dass MYSQL5.7.17 unter MAC keine Ver...

So mounten Sie eine Festplatte in Linux

Wenn Sie eine virtuelle Maschine verwenden, stell...

13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen

Inhaltsverzeichnis 1. Holen Sie sich einen zufäll...

Native JS realisiert einheitliche Bewegungen verschiedener Sportarten

In diesem Artikel wird eine einheitliche Bewegung...

So verwenden Sie Docker Swarm zum Erstellen von WordPress

Ursache Ich habe WordPress einst auf Vultr einger...

Einführung in gängige Befehle und Tastenkombinationen in Linux

Inhaltsverzeichnis 1 Systemeinführung 2 Systemver...

Starten Sie die auf Docker basierende nginxssl-Konfiguration

Voraussetzungen Ein Cloud-Server (centOS von Alib...