Canvas textAlign 屬性
示例
在位置 150 處建立一條紅線。位置 150 是以下示例中定義的所有文字的錨點。研究每個 textAlign 屬性值的影響。
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 在位置 150 處建立一條紅線
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
ctx.font = "15px Arial";
// 顯示不同的 textAlign 值
ctx.textAlign = "start";
ctx.fillText("textAlign = start", 150, 60);
ctx.textAlign = "end";
ctx.fillText("textAlign = end", 150, 80);
ctx.textAlign = "left";
ctx.fillText("textAlign = left", 150, 100);
ctx.textAlign = "center";
ctx.fillText("textAlign = center", 150, 120);
ctx.textAlign = "right";
ctx.fillText("textAlign = right", 150, 140);
自己動手試一試 »
描述
textAlign 屬性根據錨點設定或返回文字內容的當前對齊方式。
預設值為 start。
另請參閱
font 屬性 (設定文字字型和大小)
fillStyle 屬性 (設定文字顏色/漸變)
textBaseline 屬性 (設定文字基線)
fillText() 方法 (繪製文字)
strokeText() 方法 (繪製文字)
語法
| context.textAlign = "center|end|left|right|start" |
屬性值
| 值 | 描述 | 試一試 |
|---|---|---|
| start | 文字起始位置 | 試一試 » |
| end | 文字結束位置 | 試一試 » |
| center | 文字中心位置 | 試一試 » |
| left | 文字起始位置 | 試一試 » |
| right | 文字結束位置 | 試一試 » |
瀏覽器支援
<canvas> 元素是 HTML5 標準（2014）。
所有現代瀏覽器都支援 textAlign
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 參考
