KineticJS入門 – テキストを描いてみる

前回に引き続きテキストを描いてみます。
KineticJS入門 – 図形を描いてみる
Canvasエリアの用意や、ライブラリの読み込みなどは前回を参照してください。

テキストを描く

テキストの描写には関数Textをコールします。
以下、「sample text」という文字を、赤文字で描写するシンプルな例です。

window.onload = function() {
	var stage = new Kinetic.Stage({
		container:"canvas1", 
		width:300, 
		height:100
	});
	var layer = new Kinetic.Layer();
	var text = new Kinetic.Text({
		x:100, 
		y:50, 
		text:'sample text', 
		textFill:"red"
	});
	layer.add(text);
	stage.add(layer);
};

前回と同様に、Textオブジェクトをオブジェクトlayerに追加し、さらにそのオブジェクトlayerをオブジェクトstageに追加します。

テキストを装飾する

公式サイトにあるように、さまざまなオプションを設定して、文字を装飾してみます。

	var text = new Kinetic.Text({
		x:150, 
		y:30, 
		fontStyle:"italic", 
		fontSize:30, 
		stroke:"red", 
		align:"center", 
		strokeWidth:5, 
		textStroke:"green", 
		textStrokeWidth:1, 
		text:'sample text', 
		textFill:"yellow", 
		alpha:0.8, 
		rotation:0.2
	});

努力すれば、簡単なロゴぐらいなら描くことができそうですね。

日本語を描写してみる

使う場面はほとんどないと思いますが、日本語が使用可能か試してみました。

	var text = new Kinetic.Text({
		x:50, 
		y:50, 
		text:'日本語サンプルさんぷるsample', 
		textFill:"blue"
	});

予想に反して、問題なく表示されました。

「fontFamily」オプションを使えば、フォント指定も可能なようです。
しかし、JavaScript処理なので、ローカルのデバイスフォントが使用されると思われます。環境依存を考慮して、指定には注意しなければいけないでしょう。

Canvasのテキストは、画像要素のようにaltを指定できないので、SEO的には弱いかもしれません。
しかし、動的な表示が可能なので、限定した場面では利用できそうです。