Canvasでの描画を簡単に行える様になるライブラリ「EaselJS」

EaselJS: A Javascript Library for Working with the HTML5 Canvas Element.
http://easeljs.com/

Flash界の凄い人が作ったそうです。

fladdict » GSkinnerの作ったJavaScriptライブラリが素敵すぎる件
http://fladdict.net/blog/2010/12/gskinner.html

この様な記述で使えます。ここでは円(Shape)を作成してその横幅を拡大、縮小するアニメーションを行っています。

var stage;
var circle;
var addScale = 0.01;
function init() {
  var canvas = document.getElementById("canvas");
  stage = new Stage(canvas);

  circle = new Shape();
  circle.graphics.beginFill("#0000FF").drawCircle(0, 0, 100);
  circle.x = 235;
  circle.y = 235;

  stage.addChild(circle);
  stage.tick = function() {
    if (circle.scaleX > 1.5 || circle.scaleX < 0.1) {
      addScale = -addScale;
    }
    circle.scaleX += addScale;
    this.update(); // 再描画
  };

  Ticker.setFPS(30);
  Ticker.addListener(stage);
}
window.addEventListener('load', init, false);

実際に動いているものはこちらで確認出来ます。

Ticker.setFPS(30); でFPSを設定し、すると Ticker.addListener() したオブジェクト(ここでは stage )の tick メソッドが指定したFPSで呼ばれます。

オープンソースだと「リファレンス？ソース見ろ!!」という感じのプロジェクトも多いですがEaselJSはしっかりしたリファレンスページが有ります。素晴らしい!!

API: (YUI Library)
http://easeljs.com/docs/

なお、ここではアニメーション処理を tick メソッド内の記述で行っていますが現在はTweenJSという簡単にアニメーションを行うライブラリが出来てるみたいです。

アニメーション処理を行いたい場合はEaselJSと一緒にTweenJSを使用するのが簡単です。