文字を描く

前の章でスタイルや色を適用する方法を見た後は、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);
}

<canvas id="canvas" width="300" height="100"></canvas>

draw();

`strokeText` の例

現在の strokeStyle を使用して、テキストの輪郭を描画します。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = "48px serif";
  ctx.strokeText("Hello world", 10, 50);
}

<canvas id="canvas" width="300" height="100"></canvas>

draw();

テキストのスタイルを設定する

上記の例ではテキストをデフォルトのサイズより若干大きくするため、すでに 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

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="編集" />
  <input id="reset" type="button" value="リセット" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello world", 0, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

高度なテキスト測定

テキストのより詳細な情報を得る必要がある場合は、以下のメソッドでそれを測定できます。

measureText(): 指定したテキストを現在のテキストスタイルで描画したときの幅をピクセル単位で表した情報を持つ、TextMetrics オブジェクトを返します。

以下のコードスニペットは、テキストを測定して幅を得る方法を示しています。

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var text = ctx.measureText("foo"); // TextMetrics オブジェクト
  text.width; // 16;
}

Gecko 固有の注意事項

Gecko (Firefox、Firefox OS および他の Mozilla ベースアプリケーション) では一部の接頭辞付き API で、早期バージョンのテキスト描画法を実装しています。これらは非推奨化または削除されており、動作を保証しません。

« 前のページ次のページ »