canvas-waves

Canvas 粒子波形

用原生 Canvas 畫出可縮放的粒子與波形動畫。

這個 demo 用單一 canvas 呈現多層波形與緩慢流動的粒子。它保留在 client 端執行，讓內容頁仍能維持靜態輸出。

原始碼
const canvas = document.querySelector('[data-lab-demo="canvas-waves"]');
const ctx = canvas.getContext('2d');
let frame = 0;

function draw(width, height) {
  ctx.clearRect(0, 0, width, height);
  for (let layer = 0; layer < 4; layer += 1) {
    ctx.beginPath();
    const yBase = height * (0.28 + layer * 0.14);
    for (let x = 0; x <= width; x += 8) {
      const y = yBase + Math.sin(x * 0.018 + frame * 0.025 + layer * 1.7) * (16 + layer * 7);
      if (x === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    }
    ctx.stroke();
  }
  frame += 1;
  requestAnimationFrame(() => draw(width, height));
}