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 參考
