【JavaScript入門】Canvasを利用したアニメーション

　Canvas でアニメーションを行う基本は ①毎フレームの再描画 と ②前フレームの消去 です。ブラウザに最適なタイミングでコールバックしてもらえる requestAnimationFrame() を使うと、モニターのリフレッシュレート（≈60 fps）に合わせてスムーズに更新でき、setInterval より省電力でジャダーも少なくなります。ループのたびに clearRect() で前回の絵を消し、新しい座標で図形を描く――この「消す→計算→描く」の繰り返しが Canvas アニメーションの王道です。

よく使う API	役割	備考
requestAnimationFrame(cb)	次フレームで `cb` を呼び出す	引数には高精度タイムスタンプ (ms) が渡される
cancelAnimationFrame(id)	ループ停止	戻り値 ID を保持しておく
clearRect(x, y, w, h)	指定領域を透明に戻す	全消去は clearRect(0,0,canvas.width,canvas.height)
performance.now()	現在の高精度時刻 (ms)	独自タイマーが欲しいときに

サンプル：回転しながら跳ね返る四角形

ファイル名： anim_box.html

PNGファイルのダウンロードは、ここ「checker.png」からできます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>🕹️ Canvas Animation Demo</title>
<style>
  body  {font-family:"Segoe UI",sans-serif;background:#f6faff;text-align:center;margin:2rem}
  h1    {font-size:1.8rem;margin-bottom:1rem}
  canvas{border:1px solid #555;border-radius:6px;background:url(./checker.png)}
</style>
</head>
<body>
  <h1>🕹️ Canvasを利用したアニメーション</h1>
  <canvas id="stage" width="420" height="260"></canvas>

<script>
(() => {
  const cvs = document.getElementById('stage');
  const ctx = cvs.getContext('2d');
  const W = cvs.width, H = cvs.height;

  /* 図形の状態 */
  const BOX = {x: 60, y: 40, vx: 180, vy: 120, size: 50, angle: 0};

  let last = performance.now();

  /* ループ関数 */
  function loop(now) {
    const dt = (now - last) / 1000;          // 秒
    last = now;

    /* 位置の更新 */
    BOX.x += BOX.vx * dt;
    BOX.y += BOX.vy * dt;
    BOX.angle += Math.PI * dt;               // 1 回転 / 2 秒

    /* 壁衝突で反転 */
    if (BOX.x < 0 || BOX.x > W) BOX.vx *= -1;
    if (BOX.y < 0 || BOX.y > H) BOX.vy *= -1;

    /* 描画 */
    ctx.clearRect(0, 0, W, H);
    ctx.save();
    ctx.translate(BOX.x, BOX.y);
    ctx.rotate(BOX.angle);
    ctx.fillStyle   = '#ff7043';
    ctx.strokeStyle = '#1e88e5';
    ctx.lineWidth   = 6;
    ctx.fillRect(-BOX.size/2, -BOX.size/2, BOX.size, BOX.size);
    ctx.strokeRect(-BOX.size/2, -BOX.size/2, BOX.size, BOX.size);
    ctx.restore();

    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>

ブラウザの出力例

動作の要点

loop() は requestAnimationFrame で再帰的に呼ばれ、毎回 now タイムスタンプが渡される。
経過秒数 dt で位置を積分するので、フレームレートが変わっても移動速度は一定。
壁に当たったら速度ベクトルを反転してバウンド。
回転は ctx.translate → ctx.rotate → rect描画 → ctx.restore で中心基準に。
各フレームの冒頭で 全画面 clearRect。部分消去のテクニックもあるが入門では全消去が分かりやすい。

　このパターンを応用すれば、パーティクルエフェクトや簡易ゲームループなど多彩な Canvas アニメーションが構築できます。次は複数オブジェクトを配列で管理し、衝突判定やスプライト画像のアニメーションに挑戦してみましょう。