その40。

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.fillText("Time is money.", 10, 20);
};

今回勉強するのは16行目です。

16行目

「 fillText() 」でテキストを描画します。
パラメータは「 fillText（”text“,　x,　y） 」になります。

「 text 」は「 “　” 」で囲まれたものは全て出力する文字列と認識しますのでそのまま表記されます。
「 X 」はテキストを配置するX座標になります。
「 Y 」はテキストを配置するY座標ですね。
このテキストの基準点は左上となります。

次回のサンプルと関係があるのですが、
矩形描画等で「 fill 」は塗りつぶしと勉強しましたね。
テキストの塗りつぶしとは普通の文字のことになります。
普通の文字を大きくすると塗りつぶし矩形の集まりのように思いませんか？
あくまで覚え方という意味ですので参考程度に。

Tweet