jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.1.19

5分で覚えるcanvasアニメーションの基礎

Category:
Canvas

最近滞りがちなこのブログでしたが、昨年末頃からcanvasアニメ(と物理と数学)にハマり、ずっとデモのようなものを書いていました。

canvasアニメというととっつきにくさを感じる人も多いと思います。
僕もそうだったんですが、2つのメソッドの使い方を理解したところ、すんなりと入り込むことが出来ました。
なので、そのノウハウを書き残しておきます。

必要なメソッドはたった2つ

まず、覚える必要があるメソッドは以下2つ。

これだけ覚えれば、canvasアニメはすぐに作れます。

アニメーションの仕組を理解する

アニメというのは基本的に

アニメーション(英語:animation)は、動画(どうが)とも呼ばれ、コマ撮りなどによって、複数の静止画像により動きを作る技術。連続して変化する絵や物により発生する仮現運動を利用した映像手法である。

アニメーション - Wikipedia

ということであり、それはcanvasにおいても変わりはないようです。
ざっくり言えばパラパラマンガということです。
上記2つのメソッドを使用して言い換えると、

  1. requestAnimationFrameをfps単位で繰り返す。(setTimeoutなどでもイケる)
  2. 繰り返し処理の最初でclearRectし前コマを削除する。
  3. canvasの各メソッドでコマを描画する。
  4. 2に戻る。

ということになります。

パラパラマンガの仕組をJavaScriptで書き起こす

実際のコードにすると以下のような感じになります。

var width  = document.body.clientWidth;
var height = document.body.clientHeight;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var fps = 60;
var frameTime = 1000 / fps;
var lastTimeRender = +new Date();

var render = function() {
  ctx.clearRect(0, 0, width, height);
  // ここでコマを描画
};

var renderloop = function() {
    var now = +new Date();
    requestAnimationFrame(renderloop);

    if (now - lastTimeRender < frameTime) {
      return;
    }
    render();
    lastTimeRender = +new Date();
};
renderloop();

コマの描画がどんなに複雑になろうと、コマを一定間隔で描画し続けるという枠組は変わりません。
以下はこの基礎の仕組を使いまわして、描画のみをアレンジしたものです。

じゃあ描画はどうすればいいの?ということについては、長くなるのでまた別の機会に。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.