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)
。
值
示例
一般文本对齐
这个例子演示了 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
参见
- 定义该属性的接口:
CanvasRenderingContext2D