2014.02.08 Two.jsを追加しました。
CREATEJS
CREATEJSはTweenアニメーションとかオーディオ再生とか色々まとめたパッケージでcanvas部分はEASELJSになります。
Flashからの書き出しもできたり、日本語の書籍もあったりと結構有名ですね。
var circle = new createjs.Shape();circle.graphics.beginFill("red").drawCircle(0, 0, 50);circle.x = 100;circle.y = 100;stage.addChild(circle);Paper.js
sample code
var path = new Path.Circle({ center: view.center, radius: 30, strokeColor: 'black'});KineticJS
サイトには多くの事例が紹介されています。
Processing.js
「Processing」はビジュアルデザインのためのプログラミング言語です。
そのjs版はCanvasで動くみたいですね。
Two.js
canvas以外にもsvg、webglなどマルチに対応しているライブラリです。
var elem = document.getElementById('draw-shapes').children[0];var params = { width: 285, height: 200 };var two = new Two(params).appendTo(elem);var circle = two.makeCircle(72, 100, 50);circle.fill = '#FF8000';circle.stroke = 'orangered';circle.linewidth = 5;two.update();jCanvas
ファイルサイズが10KBと軽量なライブラリですね。
$("canvas").drawArc({ fillStyle: "#000", x: 100, y: 100, radius: 50});Canvas Query
cq(640, 480).drawImage(image, 0, 0).fillStyle("#ff0000").fillRect(64, 64, 32, 32).appendTo("body");その他、まだまだありますので一覧です。開発が止まっているものもありますが結構ありますね。
| pixi.js | かなり高速に動くらしいです。 |
|---|---|
| Arctic.js | DeNAが開発。スマートフォン向けに最適化されているようです。 |
| enchant.js | ゲームに特化したライブラリです。 |
| cavy.js | スマートフォンに特化した国産ライブラリです。 |
| tmlib.js | こちらも国産ライブラリ。 |
| smart js | Canvasベースではないですが、使いやすそうだったのでご紹介。 |
| jCanvaScript | |
| cakejs |





