Drawing text using a canvas

  canvas 要素は 標準である HTML 5 での機能 と いくつかの実験的な Mozilla のメソッドとプロパティの両方を用いたテキスト描画をサポートします。

Firefox 3.5 以降では、任意の調整された 影付き効果 が描画時にテキストに適用されます

メソッドの概要

void fillText(in DOMString text, in float x, in float y, [optional] in float maxWidth);
nsIDOMTextMetrics measureText(in DOMString textToMeasure);
void mozDrawText(in DOMString textToDraw);
float mozMeasureText(in DOMString textToMeasure);
void mozPathText(in DOMString textToPath);
void mozTextAlongPath(in DOMString textToDraw, in boolean stroke);
void strokeText(in DOMString text, in float x, in float y, [optional] in float maxWidth);

 

属性

属性 説明
font DOMString

テキストを描画するときに用いられる現在のテキストスタイル。この文字列は CSS font 記述子 (specifier) と同じ構文を用います。描画時のテキストスタイルを変更するためには、以下で例示されているように、単純にこの属性の値を変更するだけです。デフォルトフォントは 12-point のサンセリフ (sans-serif) です。

例:

ctx.font = "20pt Arial";
mozTextStyle DOMString

上記の HTML 5 font 属性に置き換えられます。

textAlign DOMString

テキストを描画するときに用いられる現在のテキスト配置。 指定可能な値:

left
テキストを左揃えにします。
right
テキストを右揃えにします。
center
テキストを中央揃えにします。
start
テキストを行の標準な開始位置から配置します (左から右へのロケールは左揃え、右から左へのロケールは右揃え).
end
テキストを行の標準な最終位置から配置します(左から右へのロケールは、右揃え、右から左へのロケールは左揃え)。

デフォルト値は start です。

textBaseline DOMString

テキストを描画するときに用いられる現在のテキストのベースライン(基準線)。指定可能な値:

top
テキストベースラインは em square【訳注: 一辺が 1 em の正方形】 の上になります。
hanging
テキストベースラインは hanging ベースラインになります。現在はサポートされておらず、これは alphabetic のように振舞います。
middle
テキストベースラインは em square の真ん中になります。
alphabetic
テキストベースラインは標準的な alphabetic ベースラインになります。
ideographic
テキストベースラインは ideographic ベースラインになります。つまり、これは文字の主要な本体が alphabetic ベースラインの下からはみ出る場合、文字の本体の下になります。現在はサポートされておらず、これは alphabetic のように振舞います。
bottom
テキストベースラインは bounding box の下になります。これはディセンダー (descenders) 【訳注: グリフのうちベースラインより下の部分。】を考慮しないideographic ベースラインとは異なります。

デフォルト値は alphabetic です。

     

以下は WHATWG 提供の、 textBaseline 属性によってサポートされている様々なベースラインを示した図です。

The top of the em square is
roughly at the top of the glyphs in a font, the hanging baseline is
where some glyphs like आ are anchored, the middle is half-way
between the top of the em square and the bottom of the em square,
the alphabetic baseline is where characters like Á, ÿ,
f, and Ω are anchored, the ideographic baseline is
where glyphs like 私 and 達 are anchored, and the bottom
of the em square is roughly at the bottom of the glyphs in a
font. The top and bottom of the bounding box can be far from these
baselines, due to glyphs extending far outside the em square.

メソッド

fillText()

font 属性によって指定されてテキストスタイル、および、textAlign 属性によって指定された配置、textBaseline 属性で指定されたベースラインを用いて指定されたテキストを描画します。テキストは現在の fillStyle を用いて塗りつぶされ、strokeStyle は無視されます。

註: このメソッドはGecko 1.9.1 (Firefox 3.5) で導入されました。また、HTML 5 標準の一部です。
void fillText(
   in DOMString textToDraw,
   in float x,
   in float y,
   [optional] in float maxWidth
);
引数
textToDraw
コンテキストに描画されるテキスト。
x
描画を始める X 座標。
y
描画を始める Y 座標。
maxWidth
オプション。描画する最大幅。この引数が指定され、指定文字列の幅がこの幅より広く算出された場合、フォントはより水平方向に凝縮されたフォント(そのようなフォントが利用可能、もし くは、現在のフォントを水平方向に縮小することによって適度に読みやすいフォントに合成できる場合)か、より小さなフォントを用いるように調整されます。
ctx.fillText("Sample String", 10, 50);

measureText()

指定されたテキストが現在のテキストスタイルで描画されるときの幅をピクセル単位で返します。

註: このメソッドはGecko 1.9.1 (Firefox 3.5) で導入されました。また、HTML 5 標準の一部です。
nsIDOMTextMetrics measureText(
  in DOMString textToMeasure
);
引数
textToMeasure
ピクセル単位の幅で測定される対象となる文字列。
戻り値

文字列が描画されたときの CSS ピクセルでの幅の数値を設定した width 属性を持つ nsIDOMTextMetrics オブジェクト。

mozDrawText()

非推奨

mozTextStyle 属性で指定されたテキストスタイルを用いて、指定されたテキストを描画します。コンテキストの現在の fill (塗りつぶし) の色がテキストの色として用いられます。

註: このメソッドは公式の HTML 5 のメソッドである  fillText() および strokeText() に置き換えられます。
void mozDrawText(
   in DOMString textToDraw
);
引数
textToDraw
コンテキストに描画されるテキスト。
ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");

この例は canvas の 座標 (10,50) に 赤で "Sample String" というテキストを描画します。

mozMeasureText()

非推奨

指定されたテキストが現在のテキストスタイルで描画されるときの幅をピクセル単位で返します。

註: このメソッドは HTML 5 のメソッドである measureText() に置き換えられます。
float mozMeasureText(
  in DOMString textToMeasure
);
引数
textToMeasure
ピクセル単位の幅で測定される対象となる文字列。
戻り値

ピクセル単位でのテキストの幅。

var text = "Sample String";
var width = ctx.canvas.width;
var len = ctx.mozMeasureText(text);
ctx.translate((width - len)/2, 0);
ctx.mozDrawText(text);

この例は文字列の幅を測定し、その情報を用いて canvas 要素内で水平方向に中心に寄せて文字列を描画します。

mozPathText()

指定されたテキストの輪郭を現在のパスに追加します。これは、望むならば、テキストを塗りつぶして描画するのではなく、テキストの輪郭線を描画することを可能にします。

void mozPathText(
  in DOMString textToPath
);
引数
textToPath
その輪郭線が現在のパスに追加される対象となるテキスト。
ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill()
ctx.stroke()

この例は現在のパスにテキストの輪郭を加え、パスを塗りつぶし、その輪郭線を描画することで黒で縁取られた緑の "Sample String" というテキストを描画します。

mozTextAlongPath()

現在のパスに沿って指定されたテキストを追加(あるいは 描画)します。

void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);
引数
textToDraw
指定されたパスに沿って描画されるテキスト。
stroke
この引数が true の場合、テキストは指定されたパスに沿って描画されます。false の場合、現在のパスに沿って描画されずに、そのパスに追加されます。
注意点

グリフはパスの曲がり具合に応じた拡大縮小や変形を受けることはありません。その代わり、各グリフはパスの曲がり具合を補間した直線に沿って配置されます。これはユニークな効果を作るのに使うことができます。

strokeText()

font 属性によって指定されてテキストスタイル、および、textAlign 属性によって指定された配置、textBaseline 属性で指定されたベースラインを用いて指定されたテキストの輪郭線を描画します。  現在の strokeStyle はテキストの輪郭線を描画するときに用いられます。

註: このメソッドはGecko 1.9.1 (Firefox 3.5) で導入されました。また、HTML 5 標準の一部です。
void strokeText(
   in DOMString textToDraw,
   in float x,
   in float y,
   [optional] in float maxWidth
);
引数
textToDraw
コンテキストに描画されるテキスト。
x
描画を始める X 座標。
y
描画を始める Y 座標。
maxWidth
オプション。描画する最大幅。この引数が指定され、指定文字列の幅がこの幅より広く算出された場合、フォントはより水平方向に凝縮されたフォント(そのよ うなフォントが利用可能、もしくは、現在のフォントを水平方向に縮小することによって適度に読みやすいフォントに合成できる場合)か、より小さなフォント を用いるように調整されます。 
ctx.strokeText("Sample String", 10, 50);

注意点

  • HTML 5 の Canvas text の WHATWG 仕様 を参照してください。
  • これらを使うのに特別なコンテクストは必要ありません。2D コンテクストで動作します。
  • 現在の変形の影響を受けて全ての描画が行われます。

さらなる例

ドキュメントのタグと貢献者

Contributors to this page: teoli, Potappo, Mgjbot, Kohei, Taken
最終更新者: teoli,