TEXT/YUBASCRIPT

Web開発とか生物学とかTwitterとかの話題を適当に書いてる

HTML5 Canvasのラッパー「CanvasLife.js」を書いた

HTML5のCanvasがやたら書きにくいので、自分用のwrapper書いた。まだごくごく一部の機能しかwrapしていないが、これから増やしていく予定。

CanvasLife.js

line (線)

var canvas = new Canvas($("#sample-line"));
canvas.line({
	"points": [[50,50], [100,50], [100,100], [150,100], [150,150]]
});

polygonal (多角形)

var canvas = new Canvas($("#sample-polygonal"));
canvas.polygonal({
	"points" : [[50,150], [150,150], [100,100]], 
	"type" : "fs",
	"strokeColor": "#000000",
	"strokeWidth": 2,
	"fillColor": "#ff0000"
});

// "type" : "fs" の部分を"s"にすると線(stroke)だけ、
// "f"にすると塗りつぶし(fill)だけになる

circle (円)

var canvas = new Canvas($("#sample-circle"));
canvas.circle({
	"center": [100,100],
	"radius": 50,
	"type": "fs",
	"strokeColor": "#000000",
	"strokeWidth": 2,
	"fillColor": "#ff0000"
});

こんな感じ。わりあい直感的に書けると思う。

関係ないけどgithub使うの初めて。

関連記事