その45。

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();

// フォントを指定
canvas.font = "25px 'Consolas', 'Monaco', 'ＭＳ ゴシック'";
// テキストを描画
canvas.textBaseline = "top";
canvas.fillText("Time is money.(top)", 50, 50);
canvas.drawDashLine(50, 50, 400, 50);

canvas.textBaseline = "hanging";
canvas.fillText("Time is money.(hanging)", 50, 100);
canvas.drawDashLine(50, 100, 400, 100);

canvas.textBaseline = "middle";
canvas.fillText("Time is money.(middle)", 50, 150);
canvas.drawDashLine(50, 150, 400, 150);

canvas.textBaseline = "alphabetic";
canvas.fillText("Time is money.(alphabetic)", 50, 200);
canvas.drawDashLine(50, 200, 400, 200);

canvas.textBaseline = "ideographic";
canvas.fillText("Time is money.(ideographic)", 50, 250);
canvas.drawDashLine(50, 250, 400, 250);

canvas.textBaseline = "bottom";
canvas.fillText("Time is money.(bottom)", 50, 300);
canvas.drawDashLine(50, 300, 400, 300);
};

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

「 textBaceline = “パラメータ” 」で指示をします。
指示できるパラメータは以下の通リです。
解説は直訳になります。

何のことかサッパリかと思います。
ざっくりというならば、フォント(書体)にはベースラインというものがありそれを基準に文字の大きさを決めています。
その基準をどれにするかを指定しています。
ちなみにベースラインはフォントを構成する基準の1つで他にも色々な基準がありますが割愛します。

tmlib.js はHTML5のCanvasを拡張していますのでこのベースラインはHTML5に準拠しています。
ですのでこちらで解説されているものがそのまま適用されます。
http://www.html5.jp/canvas/ref/property/textBaseline.html
ひとつひとつ解説してもよかったのですが、サンプルとリンク先を見比べてもらった方がわかりやすいと思いましたので敢えて文字では書きませんでした。

サンプルの20・24・28・32・36・40行目はベースラインを視覚化しているものになります。

Tweet