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

その44。

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

今回試すサンプルは「テキスト(Text)」の「テキストの横揃えを指定しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
「start」「end」「left」「right」「center」という文字が描画されたと思います。

/*
* 定数
*/
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();

// フォントを指定
canvas.font = "25px 'Consolas', 'Monaco', 'MS ゴシック'";
// テキストを描画
canvas.textAlign = "start";
canvas.fillText("start", 80, 40);
canvas.drawPoint(80, 40);

canvas.textAlign = "end";
canvas.fillText("end", 80, 80);
canvas.drawPoint(80, 80);

canvas.textAlign = "left";
canvas.fillText("left", 80, 120);
canvas.drawPoint(80, 120);

canvas.textAlign = "right";
canvas.fillText("right", 80, 160);
canvas.drawPoint(80, 160);

canvas.textAlign = "center";
canvas.fillText("center", 80, 200);
canvas.drawPoint(80, 200);
};

今回勉強するのは18・22・26・30・34行目です。
指定するパラメータが違うだけなので実質的に1行だけとなります。

18行目

textAlign = “パラメータ” 」で指示をします。
指示できるパラメータは以下の通リです。

start 基準点から書き始める
end 基準点で書き終わる
left 基準点に左寄せ
right 基準点に右寄せ
center 基準点がテキストの中心になるようにする

wordなどの文章作成ソフトと同じ扱いだと思っていいと思います。
気になるのは「 start 」と「 left 」、「 end 」と「 right 」では何が違うのかということですが、ライブラリの中身を見てみたのですが正直よくわかりませんでした。
文章が複数行になった場合に効果が出るような気がしますが改行させる方法も見つけられなかったので今は同じものだと思うことにします。
以降の勉強でわかったら修正します。

19行目

テキストを描画しています。
その40で勉強したものですね。忘れた方は復習してみましょう。
fillText() 」で指定している座標が基準点になります。

20行目

基準点がどこかわかるように「 drawPoint() 」でドットを描画しています。
テキストの座標とドットの座標が同じになっているのが確認できると思います。

textAlign 」のプロパティが指定されていない場合は
デフォルトの値が適用されます。
その40で勉強したテキストは「 start 」もしくは「 left 」が適用されたものと同じですよね。

こうやって解説してはいますが tmlib.js の全容を解読出来る能力がまだないのが悔しすぎますね・・・


コメントを残す

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