読者です 読者をやめる 読者になる 読者になる

Canvas要素のアニメーションライブラリcakejs

 HTMLで規定されている、2次元画像用の要素Canvasで簡単にアニメーションできるライブラリがcakejsです。
 なぜか日本では紹介されていませんが、2008年ごろからリリースされている歴史のあるライブラリで複雑な図形やそれを使ったアニメーションを簡単に書くことができます。
 円を書くならばCircleオブジェクトを呼び出す、とういうようにグローバルな名前空間を思いっきり占領しているのは少し困りものですが、使用方法にはIllustratorInkscapeのようなベクタグラフィックソフトと似たようなところがあり、こちらになじんでいる人ならば使いやすいと思います。

 長方形を回転させる例

    var c = document.getElementById("target")         // Canvas要素取得
    var canvas = new Canvas(c)          // cake.jsのキャンバスオブジェクトをnew
    canvas.fill = [255,255,255,0.8]     //半透明の白を背景色に(透明度は0.8)
    canvas.clear = false                //Canvas要素をクリアしない
    var rect = new Rectangle(100, 100)  //cake.jsの四角オブジェクト
    rect.x = 250                        // 位置移動
    rect.y = 250
    rect.fill = 'green'                 // 色塗り
    // rotate the Rectangle on every frame
    rect.addFrameListener(function(t) {
      this.rotation = ((t / 3000) % 1) * Math.PI * 2 
    })
    canvas.append(rect)                 //キャンバスに追加