HTML5のCanvasを使いやすくするライブラリまとめ

2014.02.08 Two.jsを追加しました。

CREATEJS

CREATEJSはTweenアニメーションとかオーディオ再生とか色々まとめたパッケージでcanvas部分はEASELJSになります。
Flashからの書き出しもできたり、日本語の書籍もあったりと結構有名ですね。

sample code

    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

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などマルチに対応しているライブラリです。

sample code

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と軽量なライブラリですね。

sample code

    $("canvas").drawArc({
		fillStyle: "#000",
		x: 100, y: 100,
		radius: 50
	});
	

公式サイト

Canvas Query

sample code

    cq(640, 480)
	  .drawImage(image, 0, 0)
	  .fillStyle("#ff0000")
	  .fillRect(64, 64, 32, 32)
	  .appendTo("body");
	

公式サイト

その他、まだまだありますので一覧です。開発が止まっているものもありますが結構ありますね。