CanvasRenderingContext2D: textAlign 屬性
Canvas 2D API 的 CanvasRenderingContext2D.textAlign 屬性指定繪製文字時使用的當前文字對齊方式。
對齊方式相對於 fillText() 方法的 x 值。例如，如果 textAlign 為 "center"，則文字的左邊緣將位於 x - (textWidth / 2)。
值
可能的值
"left"-
文字左對齊。
"right"-
文字右對齊。
"center"-
文字居中對齊。
"start"-
文字在行的正常起始位置對齊（對於從左到右的語言環境為左對齊，對於從右到左的語言環境為右對齊）。
"end"-
文字在行的正常結束位置對齊（對於從左到右的語言環境為右對齊，對於從右到左的語言環境為左對齊）。
預設值為 "start"。
示例
常規文字對齊
此示例演示了 textAlign 屬性的三個“物理”值："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("left-aligned", x, 40);
ctx.textAlign = "center";
ctx.fillText("center-aligned", x, 85);
ctx.textAlign = "right";
ctx.fillText("right-aligned", x, 130);
結果
依賴於方向的文字對齊
此示例演示了 textAlign 屬性的兩個依賴於方向的值："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("Start-aligned", 0, 50);
ctx.textAlign = "end";
ctx.fillText("End-aligned", canvas.width, 120);
結果
規範
| 規範 |
|---|
| HTML # dom-context-2d-textalign-dev |
瀏覽器相容性
載入中…
另見
- 定義此屬性的介面：
CanvasRenderingContext2D