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