泡が下から出るJavaScriptギミックをCanvasで描画するサンプル【jQuery無し】

<canvas id="myCanvas"></canvas>

<script>
  // Canvas要素を取得する
  const canvas = document.getElementById('myCanvas');

  // Canvasのコンテキストを取得する
  const ctx = canvas.getContext('2d');

  // 泡を表すBubbleクラスを定義する
  class Bubble {
    constructor(x, y, radius, color) {
      this.x = x;
      this.y = y;
      this.radius = radius;
      this.color = color;
      this.dy = Math.random() * 2 + 1;
    }

    // 泡を描画するメソッド
    draw() {
      ctx.beginPath();
      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
      ctx.fillStyle = this.color;
      ctx.fill();
      ctx.closePath();
    }

    // 泡をアニメーションさせるメソッド
    update() {
      // 泡のy座標を更新する
      this.y -= this.dy;

      // 泡が画面外に出たら新しい泡として再生成する
      if (this.y + this.radius < 0) {
        this.x = Math.random() * canvas.width;
        this.y = canvas.height + this.radius;
        this.dy = Math.random() * 2 + 1;
      }

      // 泡を描画する
      this.draw();
    }
  }

  // 泡の配列を作成する
  const bubbles = [];
  for (let i = 0; i < 20; i++) {
    const x = Math.random() * canvas.width;
    const y = canvas.height + Math.random() * 200;
    const radius = Math.random() * 20 + 10;
    const color = `rgba(255, 255, 255, ${Math.random() * 0.5 + 0.5})`;
    bubbles.push(new Bubble(x, y, radius, color));
  }

  // アニメーションを実行する
  function animate() {
    requestAnimationFrame(animate);

    // Canvasをクリアする
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // 泡を更新する
    for (let i = 0; i < bubbles.length; i++) {
      bubbles[i].update();
    }
  }
  animate();
</script>
<style>
  canvas#myCanvas {
    background-color: #000;
    width: 100%;
  }
</style>