Drawing text using a canvas

出典: MDC

<canvas> 要素は実験的な Mozilla 特有の API を介したテキスト描画をサポートします。

[編集] メソッドの概要

[編集] 属性

ctx.mozTextStyle = "20pt Arial";

[編集] メソッド

[編集] mozDrawText()

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

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

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 の場合、現在のパスに沿って描画されずに、そのパスに追加されます。

[編集] 注意点

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

[編集] 注意点

• これらのテキスト拡張はまだ WHATWG によって標準化されていません
• これらを使うのに特別なコンテクストは必要ありません。2D コンテクストで動作します
• 現在の変形の影響を受けて全ての描画が行われます
• bug 339553 で実装されました

[編集] さらなる例

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