その43。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「テキスト(Text)」の「最大幅を指定してテキストを描画しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
大きめの「Time is money.」と
横幅を縮めた「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.fillText("Time is money.", 10, 30);
canvas.fillText("Time is money.", 10, 60, 100);
};
今回勉強するのは19行目です。
16・18行目はその40とその42で勉強したので省きます。
19行目
18行目と19行目を比べるとパラメータが1つ追加されていますね。
追加されたものは文字全体の幅を指定しています。
18行目の文字列は16行目で指定した1文字当たり25pxの大きさで描画されていますので、全体では100pxを超える文字幅になります。
この文字列の横幅のみを100pxに縮小したものが19行目ということです。
Wordでもフォントサイズを変えずに横幅だけ変更させる機能がありますよね？あれです。
ちなみに元の大きさを超える幅を指定しても拡大はされません。
サンプルの文字列でいうならば指定していない状態で横幅160px程なのですがこれを200pxと指定しても変化はありません。
その39の画像は出来たのにと思う方いるかも知れませんが、画像とテキストでは扱いが違うということですね。
ですのでテキストは縮小は出来るが拡大は出来ないと覚えておけばいいと思います。
