「tmlib.js 怒濤の 100 サンプル!!」を試す その46

その46。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「テキスト(Text)」の「テキストのスタイルを一括で指定しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
サンプル画面中央に「Time is money.」という文字が描画されたと思います。

/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");

// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();

// テキスト情報を一括指定(font, align, baseline)
canvas.setText("32px 'Consolas', 'Monaco', 'MS ゴシック'", "center", "center");

// テキストを描画
canvas.fillText("Time is money.", SCREEN_WIDTH/2, SCREEN_HEIGHT/2);
};

今回も勉強するのは16・19行目です。
その42その44その45で勉強したものを1行でやってしまうものになります。
慣れるまでは1行づつ指示する方ががいいかと思います。

16行目

パラメータは順番に「 setText( font, align, baseline) 」になります。

font フォントの大きさと種類
align テキストの横揃え
baseline テキストの縦揃え

詳しい内容はそれぞれの解説ページを確認してもらうとして、簡単に言うならば「フォントを指定し、文字の大きさを32pxにし、横揃えを真ん中に、縦揃えを真ん中にする」という感じですね。

19行目

その40で勉強した「 fillText() 」なんですが、座標のパラメータが数値じゃないことに疑問に思う方がいるかと思います。
プログラムではよくあることです。
直接数値を入力してしまうと後でメンテナンス性が悪くなったりバグの原因になったりするのでこういった書き方をします。
詳細を知りたい方は「マジックナンバー」で検索してみてください。

4~5行目の定数で「 SCREEN_WIDTH 」と「 SCREEN_HEIGHT 」を定義していますよね。
その定義を「 /2 」、2で割るという計算をしています。
計算式で書くならば「 465 ÷ 2 = 232.5
小数点以下の値については色々ありますので敢えてそのまま行きます。
X座標もY座標も232.5pxの位置(画面中央)を基準点にしています。
16行目で「 align 」と「 baseline 」値を「 center 」にしていますのでテキストは画面の中央に表示されるというわけです。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です