前の章でスタイルや色を適用する方法を見た後は、canvas にテキストを描画する方法を見ていきます。
テキストを描く
canvas のレンダリングコンテキストでは、2 種類のテキスト描画方法を提供します:
fillText(text, x, y [, maxWidth])- (x,y) で指定した位置にテキストを塗りつぶして描画します。任意で最大描画幅を指定できます。
strokeText(text, x, y [, maxWidth])- (x,y) で指定した位置にテキストの輪郭を描画します。任意で最大描画幅を指定できます。
fillText の例
現在の fillStyle を使用して、テキストを塗りつぶして描画します。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}strokeText の例
現在の strokeStyle を使用して、テキストの輪郭を描画します。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "48px serif";
ctx.strokeText("Hello world", 10, 50);
}テキストのスタイルを設定する
上記の例ではテキストをデフォルトのサイズより若干大きくするため、すでに font プロパティを使用していました。canvas にテキストを表示する形式を調整できるプロパティは、さらにいくつかあります:
font = value- テキストを描画する際に使用するテキストのスタイルです。CSS の
fontプロパティと同じ構文にのっとった文字列です。デフォルトのフォントは 10px sans-serif です。 textAlign = value- テキストの配置を設定します。使用できる値は
start、end、left、right、centerです。デフォルト値はstartです。 textBaseline = value- ベースラインの位置ぞろえを設定します。使用できる値は
top、hanging、middle、alphabetic、ideographic、bottomです。デフォルト値はalphabeticです。 direction = value- 書字方向を設定します。使用できる値は
ltr、rtl、inheritです。デフォルト値はinheritです。
以前に CSS を扱ったことがあれば、これらのプロパティも見慣れているでしょう。
以下は WHATWG 提供の、textBaseline 属性によってサポートされている様々なベースラインを示した図です。
textBaseline の例
以下のコードを編集すると、canvas の変更個所をその場で確認できます:
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);
Playable code
高度なテキスト測定
テキストのより詳細な情報を得る必要がある場合は、以下のメソッドでそれを測定できます。
measureText()- 指定したテキストを現在のテキストスタイルで描画したときの幅をピクセル単位で表した情報を持つ、
TextMetricsオブジェクトを返します。
以下のコードスニペットは、テキストを測定して幅を得る方法を示しています。
function draw() {
var ctx = document.getElementById('canvas').getContext('2d');
var text = ctx.measureText("foo"); // TextMetrics オブジェクト
text.width; // 16;
}