その42。

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

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

16行目

「 font 」でテキストのフォントを指定しています。
パラメータは「 canvas.font　=　”size　’font1′　’font2‘　‘font3‘” 」になります。

「 size 」はフォントの大きさです。
サンプルでは「 25px 」と指定していますね。
「 font1 」はフォント名を指定します。
サンプルでは「 Consolas 」というフォントを指定しています。
「 font2 」「 font3 」も「 font1 」と同じようにフォントを指定しています。

プログラムを実行しているPCにインストールされたフォントに依存していて、「 font1 」がなければ「 font2 」といった感じに優先順位があります。
この系統のフォントで見せたいという時に指定されるような気がします。(基本デフォルトしか使わないので気がするだけです)

4つも5つも指定するのは可能ですが、指定するフォントがなければデフォルトが適用されますので3つ程度で十分だと思います。
スコア表示でどうしてもという場合は1文字づつ画像化し呼び出す、なんて方法も考えられますので。

作成するプログラムに合わせて適当なフォントの扱いを考えてみるといいかと思いますよ。

Tweet