Canvas 2D API の CanvasRenderingContext2D.strokeText()
メソッドは、指定した位置 (x, y) にテキストの輪郭線を描画します。省略可能な第 4 引数である最大幅を与えると、この幅に収まるようにテキストを縮小します。
テキストを塗りつぶして描画するための CanvasRenderingContext2D.fillText()
メソッドもご覧ください。
構文
void ctx.strokeText(text, x, y [, maxWidth]);
引数
text
- 現在の
font
、textAlign
、textBaseline
、direction
の値を使用して描画するテキスト。
x
- テキストの描画を始める、x 軸の座標。
y
- テキストの描画を始める、y 軸の座標。
maxWidth
Optional- 描画する最大幅。この引数が指定され、指定文字列の幅がこの幅より広く算出された場合、フォントはより水平方向に凝縮されたフォント (そのようなフォントが利用可能、もしくは、現在のフォントを水平方向に縮小することによって適度に読みやすいフォントに合成できる場合) か、より小さなフォントを用いるように調整されます。
例
strokeText
メソッドの使用例
strokeText
メソッドを使用する、シンプルなコードスニペットです。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.font = "48px serif"; ctx.strokeText("Hello world", 50, 100);
以下のコードを編集すると、canvas の変更個所をその場で確認できます:
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
WHATWG HTML Living Standard CanvasRenderingContext2D.strokeText の定義 |
現行の標準 |
ブラウザ実装状況
機能 | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
基本サポート | (有) | 3.5 (1.9.1) | 9 | (有) | (有) |
機能 | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
基本サポート | (有) | (有) | 1.0 (1.9.1) | (有) | (有) | (有) |
関連情報
- このメソッドを定義するインターフェイスである
CanvasRenderingContext2D
CanvasRenderingContext2D.fillText()