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);
亲自试一试 »
描述
The textAlign 属性根据锚点设置或返回文本内容的当前对齐方式。
默认值为 start。
另请参阅
font 属性（设置文本字体和大小）
fillStyle 属性（设置文本颜色/渐变）
textBaseline 属性（设置文本基线）
fillText() 方法（绘制文本）
strokeText() 方法（绘制文本）
语法
| context.textAlign = "center|end|left|right|start" |
属性值
| 值 | 描述 | 播放 |
|---|---|---|
| start | 文本开始位置 | 播放 » |
| end | 文本结束位置 | 播放 » |
| center | 文本中心位置 | 播放 » |
| left | 文本开始位置 | 播放 » |
| right | 文本结束位置 | 播放 » |
浏览器支持
The <canvas> 元素是 HTML5 标准（2014 年）。
textAlign 在所有现代浏览器中都受支持。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考资料
