Drawing text using a canvas

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

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

{{ 英語版章題("Method overview") }}

メソッドの概要

 {{ 英語版章題("Attributes") }}

属性

ctx.font = "20pt Arial";

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

{{ 英語版章題("Methods") }}

メソッド

{{ 英語版章題("fillText()") }}

fillText()

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

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()") }}

measureText()

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

nsIDOMTextMetrics measureText(
  in DOMString textToMeasure
);

引数

textToMeasure

ピクセル単位の幅で測定される対象となる文字列。

戻り値

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

{{ 英語版章題("mozDrawText()") }}

mozDrawText()

{{ deprecated_header() }}

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

void mozDrawText(
   in DOMString textToDraw
);

引数

textToDraw

コンテキストに描画されるテキスト。

例

ctx.translate(10, 50);
ctx.fillStyle = "Red";
ctx.mozDrawText("Sample String");

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

{{ 英語版章題("mozMeasureText()") }}

mozMeasureText()

{{ deprecated_header() }}

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

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()") }}

mozPathText()

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

void mozPathText(
  in DOMString textToPath
);

引数

textToPath

その輪郭線が現在のパスに追加される対象となるテキスト。

例

ctx.fillStyle = "green";
ctx.strokeStyle = "black";
ctx.mozPathText("Sample String");
ctx.fill()
ctx.stroke()

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

{{ 英語版章題("mozTextAlongPath()") }}

mozTextAlongPath()

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

void mozTextAlongPath(
  in DOMString textToDraw,
  in boolean stroke
);

引数

textToDraw

指定されたパスに沿って描画されるテキスト。

stroke

この引数が true の場合、テキストは指定されたパスに沿って描画されます。false の場合、現在のパスに沿って描画されずに、そのパスに追加されます。

注意点

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

{{ 英語版章題("strokeText()") }}

strokeText()

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

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);

{{ 英語版章題("Remarks") }}

注意点

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

{{ 英語版章題("Additional examples") }}

さらなる例

• パスの周りにテキストの輪郭線を描画する
• パスに沿って描画する
• 円の周りを移動するテキストアニメーション

{{ languages( { "en": "en/Drawing_text_using_a_canvas", "es": "es/Dibujar_texto_usando_canvas", "fr": "fr/Dessin_de_texte_avec_canvas", "pl": "pl/Rysowanie_tekstu_przy_u\u017cyciu_canvas" } ) }}