CanvasRenderingContext2D:textAlign 属性

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Canvas 2D API 的 CanvasRenderingContext2D.textAlign 属性用于描述绘制文本时文本的对齐方式。

对齐是相对于 fillText() 方法的 x 值的。例如,如果 textAlign"center",那么该文本的左侧边界会是 x - (textWidth / 2)

可能的值:

"left"

文本左对齐。

文本右对齐。

"center"

文本居中对齐。

"start"

文本对齐界线开始的地方(左对齐指本地从左向右,右对齐指本地从右向左)。

"end"

文本对齐界线结束的地方(左对齐指本地从左向右,右对齐指本地从右向左)。

默认值是 "start"

示例

一般文本对齐

这个例子演示了 textAlign 属性的三种“物理”值:"left""center""right"

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
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);

结果

依赖方向的文本对齐

这个例子演示了 textAlign 属性的两个依赖方向的值:"start""end"。注意,虽然英语文本的默认方向是 "ltr",但我们在这里手动指定了 direction 属性为 "ltr"

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
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);

结果

规范

Specification
HTML Standard
# dom-context-2d-textalign-dev

浏览器兼容性

BCD tables only load in the browser

参见