CanvasRenderingContext2D: fillText() メソッド
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
CanvasRenderingContext2D
の fillText()
はキャンバス 2D API のメソッドで、指定した座標にテキスト文字列を描画し、その文字を現在の fillStyle
で塗りつぶします。オプションの引数で、描画されるテキストの最大幅を指定すると、ユーザーエージェントは、この幅に収まるようにテキストを圧縮したり、フォントサイズを縮小したりします。
このメソッドは現在のパスを変更することなく直接描画を行うため、その後の fill()
や stroke()
の呼び出しには影響を与えません。
テキストのフォントやレイアウト構成は、 font
、textAlign
、textBaseline
、direction
の各プロパティで定義されたものを使用して描画が行われます。
メモ: 文字列の文字の輪郭を描画するには、そのコンテキストで strokeText()
メソッドを呼び出してください。
構文
fillText(text, x, y)
fillText(text, x, y, maxWidth)
引数
text
-
文字列で、このコンテキストに描画するテキスト文字列を指定します。テキストは、
font
、textAlign
、textBaseline
、direction
の設定を使用して描画されます。 x
-
テキストの描画を始める、x 軸の座標をピクセル単位で指定します。
y
-
テキストの描画を始める、y 軸の座標をピクセル単位で指定します。
maxWidth
省略可-
描画するテキストの最大幅をピクセル数で指定します。指定しなかった場合、テキストの幅は制限されません。この値を指定すると、ユーザーエージェントはカーニングを調整したり、水平方向に縮小されたフォントを選択したり(利用可能であるか、または品質を損なうことなく生成できる場合)、フォントを縮小したりして、指定した幅にテキストを収めます。
返値
なし (undefined
)。
例
塗りつぶしたテキストを描画
この例では、 "Hello world" という語を fillText()
メソッドで描画します。
HTML
まず、描画するためのキャンバスが必要です。このコードでは、幅 400 ピクセル、横 150 ピクセルのコンテキストを作成します。
<canvas id="canvas" width="400" height="150"></canvas>
JavaScript
この例の JavaScript コードは次のようになります。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90);
このコードでは、 <canvas>
への参照を取得し、その 2D グラフィックコンテキストへの参照を取得します。
そして、 font
を高さ 50 ピクセルの "serif" (ユーザーの既定のセリフ付きフォント)に設定し、 fillText()
を呼び出して座標 (50, 90) からテキスト "Hello world" を描画しています。
結果
テキストの大きさの制限
この例は "Hello world" という文字列を、 140 ピクセルの幅に制約して描画します。
HTML
<canvas id="canvas" width="400" height="150"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px serif";
ctx.fillText("Hello world", 50, 90, 140);
結果
仕様書
Specification |
---|
HTML Standard # dom-context-2d-filltext-dev |
ブラウザーの互換性
BCD tables only load in the browser