検索結果

CanvasRenderingContext2D.fillText()

この記事内

構文
1. 引数
例
1. fillText メソッドの使用例
  1. HTML
  2. JavaScript
仕様
ブラウザ実装状況
関連情報

Canvas 2D API の CanvasRenderingContext2D.fillText() メソッドは、指定した位置 (x, y) にテキストを塗りつぶして描画します。省略可能な第 4 引数である最大幅を与えると、この幅に収まるようにテキストを縮小します。

テキストの輪郭線を描画するための CanvasRenderingContext2D.strokeText() メソッドもご覧ください。

構文

void ctx.fillText(text, x, y [, maxWidth]);

引数

text: 現在の font、textAlign、textBaseline、direction の値を使用して描画するテキスト。
x: テキストの描画を始める、x 軸の座標。
y: テキストの描画を始める、y 軸の座標。
maxWidth Optional: 描画する最大幅。この引数が指定され、指定文字列の幅がこの幅より広く算出された場合、フォントはより水平方向に凝縮されたフォント (そのようなフォントが利用可能、もしくは、現在のフォントを水平方向に縮小することによって適度に読みやすいフォントに合成できる場合) か、より小さなフォントを用いるように調整されます。

例

`fillText` メソッドの使用例

fillText メソッドを使用する、シンプルなコードスニペットです。

HTML

<canvas id="canvas"></canvas>

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);

以下のコードを編集すると、canvas の変更個所をその場で確認できます:

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="編集" />
  <input id="reset" type="button" value="リセット" />
</div>
<textarea id="code" class="playable-code">
ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

仕様

仕様書	策定状況	コメント
WHATWG HTML Living Standard CanvasRenderingContext2D.fillText の定義	現行の標準

機能	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)	(有)	(有)	(有)

ドキュメントのタグと貢献者

タグ:

このページの貢献者: yyss

最終更新者: yyss, 2016/08/30 6:52:00