JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト

テキストの描画

今回はテキストをcanvasに描画してみます。もちろん、描かれるのは「絵」ですので、選択やコピーペーストなどはできません。

テキストを作る

では実際にテキストを表示させます。今回表示させるのは、ド定番中のド定番であるHello Worldです。Textオブジェクトは直接ステージに描画させることができます。円を描画する時と比べて手順が少ないですね。
この辺りはPhotoshopを使ったことがある人は分かりやすいかもしれません。new Text()はPhotoshopで言えばテキストレイヤーを追加する処理で、new Shape()はシェイプレイヤーを追加する処理。シェイプレイヤーにはGraphicsオブジェクトで作成したパスをセットする必要がある。というイメージです。

var stage = new Stage($("canvas")[0]);

//Text("表示させる文字列","文字サイズとフォント指定","文字の色")
var text = new Text("Hello World!","36px Impact", "#CCC");

//位置調整できる
text.x = $(window).width()/2;
text.y = $(window).height()/2;

//テキストをStageにセット
stage.addChild(text);

//描画！
stage.update();

実行結果

以下が実行結果になります。テキストを画面中央にセットしていますが、微妙にずれていますね。これはテキストの中心点がテキストの左上端(left-top)にあるからです。ここで指定しているのはfont-size、font-family、font-colorのみですが、ほかにも様々な設定が可能です。
また、少々滲みます。これはCanvas上に落とし込んだ時にエイリアスされてしまうので、防ぎようがありません。この辺がラスターデータを扱うCanvasの弱みでしょうか。
ひとまず今回はテキスト描画がテーマですので、今回はこのへんで。