CanvasRenderingContext2D: textAlign プロパティ
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.textAlign
はキャンバス 2D API のプロパティで、テキストを描画するときに用いられる現在のテキスト配置を指定します。
配置は fillText()
メソッドの x の値からの相対位置になります。 textAlign
が "center"
であれば、テキストの左端は x - (textWidth / 2)
になります。
値
例
全般的なテキスト配置
この例では、 textAlign
プロパティの 3 つの「物理的な」値、 "left"
, "center"
, "right"
を示しています。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
canvas.width = 350;
const ctx = canvas.getContext("2d");
const x = canvas.width / 2;
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();
ctx.font = "30px serif";
ctx.textAlign = "left";
ctx.fillText("左揃え", x, 40);
ctx.textAlign = "center";
ctx.fillText("中央揃え", x, 85);
ctx.textAlign = "right";
ctx.fillText("右揃え", x, 130);
結果
書字方向に依存したテキストの配置
この例では、 textAlign
プロパティの 2 つの書字方向に依存する値、 "start"
と "end"
を示しています。なお、 direction
プロパティは手動で "ltr"
と指定していますが、これは英語のテキストに対する既定値でもあります。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px serif";
ctx.direction = "ltr";
ctx.textAlign = "start";
ctx.fillText("先頭揃え", 0, 50);
ctx.textAlign = "end";
ctx.fillText("末尾揃え", canvas.width, 120);
結果
仕様書
Specification |
---|
HTML Standard # dom-context-2d-textalign-dev |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- このメソッドを定義しているするインターフェイスである
CanvasRenderingContext2D