CanvasRenderingContext2D: textAlign 属性

基线 广泛可用

此功能已得到很好的建立，并且在许多设备和浏览器版本上都能正常工作。它自 2015 年 7 月.

报告反馈

Canvas 2D API 的 **CanvasRenderingContext2D.textAlign** 属性指定在绘制文本时使用的当前文本对齐方式。

值

对齐方式相对于 fillText() 方法的 x 值。例如，如果 textAlign 为 "center"，则文本的左边缘将位于 x - (textWidth / 2) 处。

可能的值

"left"

"right"

文本右对齐。

"center"

文本居中对齐。

"start"

文本对齐到行首（对于从左到右的语言环境，左对齐；对于从右到左的语言环境，右对齐）。

"end"

文本对齐到行尾（对于从左到右的语言环境，右对齐；对于从右到左的语言环境，左对齐）。

示例

默认值为 "start"。

通用文本对齐

HTML

此示例演示了 textAlign 属性的三个“物理”值："left"、"center" 和 "right"。
<canvas id="canvas"></canvas>

JavaScript

html
const canvas = document.getElementById("canvas");
canvas.width = 350;
const ctx = canvas.getContext("2d");
const x = canvas.width / 2;

ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
ctx.stroke();

ctx.font = "30px serif";

ctx.textAlign = "left";
ctx.fillText("left-aligned", x, 40);

ctx.textAlign = "center";
ctx.fillText("center-aligned", x, 85);

ctx.textAlign = "right";
ctx.fillText("right-aligned", x, 130);

js

结果

方向相关的文本对齐

HTML

此示例演示了 textAlign 属性的三个“物理”值："left"、"center" 和 "right"。
<canvas id="canvas"></canvas>

JavaScript

html
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px serif";
ctx.direction = "ltr";

ctx.textAlign = "start";
ctx.fillText("Start-aligned", 0, 50);

ctx.textAlign = "end";
ctx.fillText("End-aligned", canvas.width, 120);

js

规范

此示例演示了 textAlign 属性的两个方向相关的值："start" 和 "end"。请注意，direction 属性被手动指定为 "ltr"，尽管这也是英语文本的默认值。
规范
# HTML 标准

浏览器兼容性

dom-context-2d-textalign-dev

另请参见