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

その41。

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

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

16行目

strokeText() 」でテキストを描画します。
基本的には塗りつぶしのテキストと同じです。
パラメータは「 strokeText(”text“, x, y 」になります。

text 自由テキスト
x 文字を配置するX座標
y 文字を配置するY座標

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

その40でもちょっと説明しましたが
テキストにも塗りつぶしとストロークがあります。
塗りつぶしは普通の文字のことでしたね。
ストロークは文字を縁取りした縁のみと思って下さい。
サンプルだと文字がちょっと小さいので分かりづらいですね。
まだ勉強していませんが以下のように変更するとわかりやすいかな。

canvas.font = "50px 'Consolas', 'Monaco', 'MS ゴシック'";
canvas.strokeText("Time is money.", 10, 70);

詳しくは次回説明するとして簡潔に言うなら文字を大きくして、テキストの表示位置を変えています。


コメントを残す

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