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: