js キャンバスで円形の水のアニメーションを実現

この記事の例では、円形の水のアニメーションを実現するためのキャンバスの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

序文

特殊効果表示

エフェクト表示

コードショーケース

インデックス.html

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <!-- <link rel="スタイルシート" href="style.css" > -->
</head>
<本文>
    <script src="main.js"></script>
</本文>
</html>

メイン.js

/*
 * ノエル・デルガド - @pixelia_me
 */

（関数（） {
  var ctx、w、h、cx、cy、PI、PI_HALF、cos、sin、ランダム、lineWidth、C、 
      リング、リングの長さ、データ;

  ctx = document.createElement('canvas').getContext('2d');
  600 です
  600;
  cx = (w / 2);
  cy = (h / 2);
  リング = [];
  リングの長さ = 0;
  
  PI = Math.PI;
  PI_HALF = PI / 2;
  cos = Math.cos;
  sin = Math.sin;
  ランダム = Math.random;

  線幅 = 0.2;
  C = ["#ABF8FF"、"#E76B76"、"#1D2439"、"#4F3762"、"#67F9FF"、"#0C0F18"];
  
  データ = [
    /* リング {t:粒子の総数、r:半径、d:距離、s:速度、c:色} */
    [
      {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 = w;
  ctx.canvas.height = h;
  document.body.appendChild(ctx.canvas);

  data.forEach(関数(グループ) {
    var リング = [];
    
    グループ.forEach(関数(軌道、i) {
      var total_particles、インデックス;
      
      合計粒子数 = orbit.t;
      インデックス = 0;
      
      for (; インデックス < total_particles; インデックス++) {
        var 半径、距離、速度、色、不透明度;

        半径 = orbit.r;
        距離 = orbit.d;
        速度 = ランダム() / 軌道.s;
        速度 = i % 2 ? 速度 : 速度 * -1;
        色 = orbit.c;
        不透明度 = orbit.o;

        ring.push(新しいP(半径、距離、速度、色、不透明度));

        半径 = 距離 = 速度 = 色 = 不透明度 = null;
      }
    });
    
    リングをプッシュします。
  });

  リングの長さ = リング.長さ;
 
  /* */
  関数 P(半径, 距離, 速度, 色) {
    this.a = PI / 180;
    this.d = 距離;
    this.d2 = (this.d * this.d);
    this.x = cx + 半径 * cos(this.a);
    this.y = cy + 半径 * sin(this.a);
    色を変更する
    ランダムな値を8に増やす
    this.R = random() > 0.5 ? 半径: 半径 - 5;
    this.s = 速度;
    this.pos = ランダム() * 360;
  }
  
  関数draw() {
    変数 i、j、k、xd、yd、d、リング、リングの長さ、リングの長さ2、粒子、p2;

    ctx.beginPath();
    ctx.globalCompositeOperation = "ソースオーバー";
    ctx.rect(0, 0, w, h);
    ctx.fillStyle = "#151a28";
    ctx.fill();
    ctx.closePath();

    (i = 0; i < リングの長さ; i++) {
      リング = rings[i];
      リングの長さ = リング.長さ;
      リングの長さ2 = リングの長さ - 100;
      
      (j = 0; j < リングの長さ; j++) {
        粒子 = リング[j];

        粒子.x = cx + 粒子.R * sin(PI_HALF + 粒子.pos);
        粒子.y = cy + 粒子.R * cos(PI_HALF + 粒子.pos);
        粒子.pos += 粒子.s;

        ctx.beginPath();
        ctx.globalAlpha = 0.12;
        ctx.globalCompositeOperation = "軽量";
        ctx.fillStyle = 粒子.c;
        ctx.arc(粒子.x、粒子.y、粒子.r、PI * 2、false);
        ctx.fill();
        ctx.closePath();

        (k = 0; k < リングの長さ2; k++) の場合 {
          p2 = リング[k];

          yd = p2.y - 粒子.y;
          xd = p2.x - 粒子.x;
          d = ((xd * xd) + (yd * yd));

          （d < 粒子.d2）の場合{
            ctx.beginPath();
            ctx.globalAlpha = 1;
            ctx.lineWidth = 線幅;
            ctx.moveTo(粒子.x、粒子.y);
            ctx.lineTo(p2.x, p2.y);
            ctx.strokeStyle = p2.c;
            ctx.stroke();
            ctx.closePath();
          }
        }
      }
    }
  }

  関数ループ() {
    描く（）;
    アニメーションフレームをリクエストします(ループ)。
  }

  ループ（）;
  
})();

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: