例
創建在位置150的位置150中的紅線是在下面的例子中定義的所有文本中的錨點。 研究每個TextAlign屬性值的效果：
JavaScript的：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// Show the different textAlign values
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 | 4 | 9 | 3.6 | 4 | 10.1 |
定義和用法
TextAlign屬性設置或返回文本內容的當前對準，根據錨點。
通常情況下，文本將START在指定的位置，但是，如果你請將textAlign =“右”，把文本中的位置150，這意味著該文本應在位置150 結束 。
Tip:使用fillText()或strokeText()方法以實際繪製並在畫布上定位文本。
| 默認值： | 開始 |
|---|---|
| JavaScript語法： | context .textAlign="center|end|left|right|start"; |
屬性值
| 值 | 描述 | 播放 |
|---|---|---|
| 開始 | 默認。 文本開始在指定的位置 | 播放 ” |
| 結束 | 文本在指定的位置結束 | 播放 ” |
| 中央 | 文本的中心放置在指定位置 | 播放 ” |
| 剩下 | 文本開始在指定的位置 | 播放 ” |
| 對 | 文本在指定的位置結束 | 播放 ” |
<畫布對象