WEBOPIXEL

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

Posted: 2013.12.20 / Category: HTML&CSS, javascript / Tag: 

HTML5のCanvasをそのまま使おうとすると結構大変ですね。そこでCanvasのライブラリとか使うと効率がいいらしいのでまとめてみました。

Sponsored Link

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

CREATEJS

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

Paper.jsサンプル

sample code

    var path = new Path.Circle({
		center: view.center,
		radius: 30,
		strokeColor: 'black'
	});
	
公式サイト

KineticJS

KineticJSサンプル

サイトには多くの事例が紹介されています。

公式サイト

Processing.js

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");
	
公式サイト

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

pixi.js かなり高速に動くらしいです。
Arctic.js DeNAが開発。スマートフォン向けに最適化されているようです。
enchant.js ゲームに特化したライブラリです。
cavy.js スマートフォンに特化した国産ライブラリです。
tmlib.js こちらも国産ライブラリ。
smart js Canvasベースではないですが、使いやすそうだったのでご紹介。
jCanvaScript
cakejs