KineticJS入門 – 図形を描いてみる

HTML5＋CSS3は将来、Flashに替わるものになり得るのかという議論があります。
個人的には基本、オープンかつシンプルな技術が富をもたらすと信じているので、環境を選ぶFlashに対しては、それに替わる技術が発展するとすれば、それは大いに期待したいところではあります。

その可能性を感じさせる技術のひとつに、JavaScriptのライブラリ「KineticJS」があります。
KineticJS – HTML5 Canvas JavaScript Library Framework
今回は「KineticJS」について少しお勉強してみたいと思います。

KineticJSを組み込む

上記の公式サイトの「Download」より「KinecticJS」の最新版をダウンロードします。現時点での最新版は3.9.8です。
ダウンロードしたライブラリを、通常のJSを読み込む要領で以下のようにします。

<script src="/js/kinetic-v3.9.8.min.js"></script>

準備はこれだけでOKです。

長方形を描いてみる

まずは、Canvasを描くエリアを用意します。

<div id="canvas1"></div>

まず、描写エリアのidを指定して、300×200のサイズのステージを用意します。
そこにサイズ100×50の赤枠の正方形を、上から50px、左から100pxの位置に描写します。

window.onload = function() {
	var stage = new Kinetic.Stage({
		container:"canvas1", 
		width:300, 
		height:200
	});
	var layer = new Kinetic.Layer();
	var rect = new Kinetic.Rect({
		x:100, 
		y:50, 
		width:100, 
		height:50, 
		stroke:"red"
	});
	layer.add(rect);
	stage.add(layer);
};

図形の情報をもったrectを、オブジェクトlayerに追加して、さらにそのlayerをオブジェクトstageに追加することで、描写処理が完了します。
実際の実行結果は以下のとおりです。Firefoxの最新版やGoogle Chromeの最新版などの対応ブラウザであれば、問題なく見れていると思います。

円を描いてみる

同様にして、関数Circleをコールすることで、円を描写することができます。

	var stage = new Kinetic.Stage({
		container:"canvas2", 
		width:300, 
		height:200
	});
	var layer = new Kinetic.Layer();
	var circle = new Kinetic.Circle({
		x:200, 
		y:100, 
		strokeWidth:100, 
		stroke:"blue"
	});
	layer.add(circle2);
	stage.add(layer2);

直径が100pxの青色の円を、上から100px、左から200pxの位置に描写します。

レイヤーやステージを意識したオブジェクト名になっているので、AS3に近い感覚でプログラミングできますね。
また、ここまでは、何もJSライブラリがなくとも、HTML5＋CSS3のみで実装できそうなレベルです。
その先は次回にお勉強したいと思います。