JavaScriptでCanvasに波紋のエフェクトを描画するサンプルスクリプト

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

<style>
#canvas {
 background: #333;
 width: 100%;
}
</style>

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

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

let rippleEffects = [];

// 波紋エフェクトを生成する関数を定義する
function createRippleEffect() {
  // 波紋のパラメーターをランダムに生成する
  let centerX = Math.random() * canvas.width;
  let centerY = Math.random() * canvas.height;
  let radius = 0;
  let maxRadius = Math.min(centerX, centerY);

  // 新しい波紋エフェクトを生成する
  let rippleEffect = {
    centerX: centerX,
    centerY: centerY,
    radius: radius,
    maxRadius: maxRadius
  };

  // 生成した波紋エフェクトを配列に追加する
  rippleEffects.push(rippleEffect);
}

// 波紋エフェクトを描画する関数を定義する
function drawRippleEffect(rippleEffect) {
  // 波紋の半径を増加させる
  rippleEffect.radius += 1;

  // 波紋が最大半径に達した場合は、配列から波紋エフェクトを削除する
  if (rippleEffect.radius > rippleEffect.maxRadius) {
    let index = rippleEffects.indexOf(rippleEffect);
    if (index !== -1) {
      rippleEffects.splice(index, 1);
    }
    return;
  }

  // 波紋のスタイルを設定する
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.arc(rippleEffect.centerX, rippleEffect.centerY, rippleEffect.radius, 0, 2 * Math.PI);
  ctx.stroke();
}

// アニメーションを開始する関数を定義する
function animate() {
  // Canvasをクリアする
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 新しい波紋エフェクトを生成する
  createRippleEffect();

  // すべての波紋エフェクトを描画する
  for (var i = 0; i < rippleEffects.length; i++) {
    drawRippleEffect(rippleEffects[i]);
  }

  // 次のフレームをアニメーションする
  requestAnimationFrame(animate);
}

// 初回のアニメーションを開始する
requestAnimationFrame(animate);
</script>