HTML5 Canvas による残像アニメーション

目次

• 完成図
• Canvasの基本
• アニメーションのやり方
• 残像の残し方
• まとめ

完成図

Canvasの基本

HTML5 Canvas要素を使った残像アニメーションのやり方。

Canvasの基本的な使い方は以下のサイトを参考にするといいです。
Canvas - HTML5.JP

基本的な流れは以下の部分のようになります。

  // init
  // ====================
  window.onload = function() {
    var ctx = getCanvasContext("canvas"); // Canvasのコンテキストを取得
    var size = getSize("canvas"); // Canvas描画領域の大きさを取得
    drawAnimation(ctx, size, opt); // 丸を円軌道にアニメーションさせて描画
  };

コメントにあるように、

1. Canvasのコンテキストを取得
2. Canvas描画領域の大きさを取得
3. 丸を円軌道にアニメーションさせて描画

という流れです。Canvas描画領域の大きさを取得とありますが、今回は単に描画位置指定のため事前に取得しておきたかっただけで、必要ない場合はもちろん省けます。

アニメーションのやり方

通常のアニメーションと同じようにsetTimeoutで関数を再帰させます。

// 丸を円軌道にアニメーションさせて描画
  // ...（省略）
  var drawAnimation = function(ctx, size, opt) {
    var loop = function() {
      // ...（省略）
      // アニメーションのループ
      setTimeout(loop, opt.interval);
    };
    loop();
  };

残像の残し方

アニメーションのループでは、キャンバスを一旦クリアして次の描画を行っています。
ここではクリアの方法として背景色で塗りつぶす方法を採用しました。
その際に全てクリアするのではなく、アルファ値を指定し、薄く残します。
これによって残像が生まれます。

      // キャンバスクリア（残像を残す）
      ctx.globalAlpha = 1 - opt.afterimage;
      ctx.fillStyle = opt.bgColor;
      ctx.fillRect(0, 0, size.w, size.h);
      ctx.globalAlpha = 1;

このキャンバスクリア部分の

      ctx.globalAlpha = 1 - opt.afterimage;

という指定でアルファ値を指定しています。

まとめ

ということでちょっとしたことをするくらいならCanvasも結構簡単に扱えるようですね。

アニメーションをサイクロイドやら数学的に著名な動きにしてみたり、物理的な加速を効かせてみたりするだけで、ちょっと楽しい感じになります。