サイト内検索

fillText(), strokeText() メソッド

構文

context . fillText(text, x, y [, maxWidth ] )
context . strokeText(text, x, y [, maxWidth ] )

指定のテキストを指定の位置に、塗りつぶす、または、(個々に)輪郭描画します。最大幅が与えられると、そのテキストは必要に応じてそれにフィットするよう伸縮されるでしょう。

仕様

fillText()strokeText() メソッドには、 text, x, y そして任意で maxWidth の3つ、もしくは4つの引数を与えます。そして、指定された text が指定された座標 (x, y) にレンダリングされます。もし maxWidth が引数に指定された場合は、それより決して横幅が広くならないようにレンダリングされます。 レンダリングの際には、現在の font, textAlign, textBaseline の値が適用されます。特に、このメソッドが呼び出されると、ユーザーエージェントは、次の手順を実行しなければいけません:

  1. font を、コンテキストの現在のフォントにします。font 属性にセットされた値を適用します。

  2. text にあるすべての空白文字を U+0020 SPACE 文字に置き換えます。

  3. テキスト text が入ったひとつのインライン・ボックスを入れた、無限に幅が広い仮想の CSS ライン・ボックスを形成します。この CSS ライン・ボックスは、すべてのプロパティに初期値を持ちます。ただし、font にセットされているインライン要素の 'font' プロパティと、canvas 要素の方向性にセットされたインライン・ボックスの 'direction' プロパティは除外されます。[CSS]

  4. 引数 maxWidth が指定され、仮想のラインボックス内のインライン・ボックスの仮想の横幅が CSS ピクセル maxWidth より大きい場合は、font を、より幅の短いフォント(利用可能で、当然ではあるが、可読なのであれば、そのフォントに水平方向に倍率を適用して合成したものでも良い)や、より小さいフォントを持つように変更します。そして、前のステップに戻ります。

  5. 次のように、anchor point を、 textAligntextBaseline の値で特定できるインライン・ボックス上の地点とします:

    水平位置:

    textAlignleft の場合
    textAlignstart で、canvas 要素の方向性が 'ltr' の場合
    textAlignend で、canvas 要素の方向性が 'rtl' の場合
    anchor point の水平位置をインライン・ボックスの左端とする。
    textAlignright の場合
    textAlignend で、canvas 要素の方向性が 'ltr' の場合
    textAlignstartで、canvas 要素の方向性が 'rtl' の場合
    anchor point の水平位置をインライン・ボックスの右端とする。
    textAligncenter の場合
    anchor point の水平位置をインライン・ボックスの左端と右端の真ん中とする。

    垂直位置:

    textBaselinetop の場合
    anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの em ボックスの上端とする。
    textBaselinehanging の場合
    anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの hanging baseline とする。
    textBaselinemiddle の場合
    anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの em ボックスの下端と上端の真ん中とする。
    textBaselinealphabetic の場合
    anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの alphabetic baseline とする。
    textBaselineideographic の場合
    anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの ideographic baseline とする。
    textBaselinebottom の場合
    anchor point の垂直位置をインライン・ボックスの最初の利用可能なフォントの em ボックスの下端とする。
  6. テキストの絵文字によって与えられた形状で仮想のインライン・ボックスを描画します。この形状は、現在の変換マトリックスによって変形されたものです。現在の変換マトリックスを適用する前は、anchor point は (x, y) で、各 CSS ピクセルが座標空間の 1 単位にマッピングされているよう、位置特定および伸縮が行われた上で描画されます。

    fillText() では、fillStyle が絵文字に適用され、strokeStyle は無視されます。 strokeText()では、逆に、strokeStyle が絵文字のアウトラインに適用され、fillStyle は無視されます。

    テキストは現在のパスに影響を及ぼすことなしに描画されます。そして、 shadow 効果, グローバル・アルファ, クリッピング領域, グローバル・コンポジション演算子の対象となります。


※ 原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-filltext

サンプル

fillTextメソッドのサンプル

このサンプルでは、"青色でstrokeText" と "赤色でfillText" と、それぞれに対して "maxLengthをセット" という計 4 つの文字列を描画します。

/* フォントスタイルを定義 */
ctx.font = "18px 'MS Pゴシック'";
/* 青色でstrokText */
ctx.strokeStyle = "blue";
ctx.strokeText("青色でstrokText", 10, 25);
/* maxLengthをセット */
ctx.strokeText("maxLengthをセット", 10, 50, 80);
/* 赤色でfillText */
ctx.fillStyle = "red";
ctx.fillText("赤色でfillText", 10, 75);
/* maxLengthをセット */
ctx.fillText("maxLengthをセット", 10, 100, 80);

[fillText() / strokeText() メソッドの実際のサンプル]

ブラウザ対応状況

fillText

Firefox Safari Chrome Opera IE ExplorerCanvas
2 × 2 × 1 × 9.2 × 9 ○ 0002 ×
3 × 3 × 2 △ 9.5 ×   3 ×
3.5 ○ 4 △ 3 △ 10 ×    
3.6 ○ 5△ 6 △ 10.60 ○    

strokeText

Firefox Safari Chrome Opera IE ExplorerCanvas
2 × 2 × 1 × 9.2 × 9 ○ 0002 ×
3 × 3 × 2 × 9.5 ×   3 ×
3.5 ○ 4 △ 3 △ 10 ×    
3.6 ○ 5 △ 6 △ 10.60 ○    

Safari と Chrome は、第4引数 maxLength に対応していません。