波形アニメーション

<h3>波形アニメーション</h3>

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

/* コンテンツスタイル
-------------------------*/
body {
  background: #1a8093;
}
h3 {
  text-align: center;
  color: #fff;
}
/* 波形スタイル
-------------------------*/
canvas#waveCanvas { 
  position: absolute; 
  bottom: 0; 
  left: 0; 
} 

// 波形アニメーション
// ----------------------------------
var unit = 100,               // 波の高さ
    waves = [],               // キャンバスと波設定の配列
    info = { seconds: 0, t: 0 }, // アニメーション時間の管理
    lastTime = performance.now(); // 前フレームの時間

// 初期化処理
function init() {
  // --- キャンバスと波設定を登録 ---
  waves.push({
    canvas: document.getElementById("waveCanvas"), // キャンバス要素
    settings: [
      // [透明度, 波長倍率, 位相差, 上色, 下色]
      [1, -1, 0, '#ffffff', '#78e1ff']
    ]
  });

  resizeCanvas(); // 初期サイズ設定

  // リサイズ時にもキャンバス幅を更新
  window.addEventListener("resize", resizeCanvas);

  // 描画ループ開始
  requestAnimationFrame(update);
}

// キャンバスサイズを画面幅に合わせる
function resizeCanvas() {
  for (var i = 0; i < waves.length; i++) {
    var canvas = waves[i].canvas;
    canvas.width = document.documentElement.clientWidth; // 画面幅
    canvas.height = 100; // キャンバスの高さ（波の高さを超えない範囲で変更可）
    canvas.contextCache = canvas.getContext("2d"); // コンテキストを保存
  }
}

// 描画ループ
function update(now) {
  // 経過時間（秒）
  var dt = (now - lastTime) / 1000;
  lastTime = now;

  // 時間を進める（波の位相計算用）
  info.seconds += dt;
  info.t = info.seconds * Math.PI;

  // 各キャンバスを描画
  for (var i = 0; i < waves.length; i++) {
    draw(waves[i].canvas, waves[i].settings);
  }

  requestAnimationFrame(update); // 次フレーム
}

// 単一キャンバスの波をすべて描画
function draw(canvas, settings) {
  var context = canvas.contextCache;
  context.clearRect(0, 0, canvas.width, canvas.height); // 一旦クリア

  for (var i = 0; i < settings.length; i++) {
    var alpha = settings[i][0];       // 透明度
    var zoomSetting = settings[i][1]; // 波長倍率（-1は自動調整）
    var delay = settings[i][2];       // 位相差
    var colorTop = settings[i][3];    // 上の色
    var colorBtm = settings[i][4];    // 下の色

    // zoom = -1 の場合はデバイス幅で可変
    var zoom = (zoomSetting === -1)
      ? (canvas.width <= 768 ? 2 : 3) // スマホ:2, PC:3
      : zoomSetting;

    drawWave(canvas, colorTop, colorBtm, alpha, zoom, delay);
  }
}

// 波形塗りつぶし
function drawWave(canvas, topColor, bottomColor, alpha, zoom, delay) {
  var context = canvas.contextCache;

  // 縦グラデーション作成
  var gradient = context.createLinearGradient(0, 0, 0, canvas.height);
  gradient.addColorStop(0, topColor);
  gradient.addColorStop(1, bottomColor);

  context.fillStyle = gradient;
  context.globalAlpha = alpha; // 透明度適用
  context.beginPath();

  // 波形のパスを作成
  drawSine(canvas, info.t, zoom, delay);

  // 下端を閉じる
  context.lineTo(canvas.width + 10, canvas.height);
  context.lineTo(0, canvas.height);
  context.closePath();
  context.fill();

  context.globalAlpha = 1; // 透明度をリセット
}

// サイン波パスの生成
function drawSine(canvas, t, zoom, delay) {
  var xAxis = Math.floor(canvas.height / 2); // 波の中心高さ
  var yAxis = 0;
  var context = canvas.contextCache;

  var x = t;
  var y = Math.sin(x) / zoom;
  context.moveTo(yAxis, unit * y + xAxis);

  // 10px ごとに座標を計算して線をつなぐ
  for (var i = yAxis; i <= canvas.width + 10; i += 10) {
    x = t + (-yAxis + i) / unit / zoom;
    y = Math.sin(x - delay) / 3; // delayで波の位置をずらす
    context.lineTo(i, unit * y + xAxis);
  }
}

init();