テキストの描画
キャンバスにテキストを描画します。テキストを描画するためには、strokeTextメソッド、またはfillTextメソッドを用います。それぞれの引数は以下の通りです。textには入力したい文字列が入ります。そして表示させたい位置を座標(x, y)で指定します。またこれらのメソッドは、呼び出した時点で直ちにキャンバスに描画されるので、strokeメソッドやfillメソッドは必要ありません。
// 文字の輪郭を描画
strokeText("text", x, y);
// 文字を塗りつぶして描画
fillText("text", x, y);
サンプル
サンプルでは、strokeTextメソッドとfillTextメソッドの描画をしています。fillTextでは普通に文字が描画されますが、strokeTextでは文字の輪郭が描画されます。
// フォントの指定
cx.font = "30px 'ＭＳ Ｐゴシック'";
// strokeText,fillTextのサンプル
cx.strokeText("サンプルです。", 40, 60);
cx.fillText("This is a sample.", 40, 100);
// 色付きのサンプル
cx.strokeStyle = "rgb(256, 100, 100)";
cx.strokeText("サンプルです。", 40, 180);
cx.fillStyle = "rgb(100, 100, 256)";
cx.fillText("This is a sample.", 40, 220);