CanvasRenderingContext2D.textAlign 是 Canvas 2D API 描述绘制文本时,文本的对齐方式的属性。注意,该对齐是基于CanvasRenderingContext2D.fillText方法的x的值。所以如果textAlign="center",那么该文本将画在 x-50%*width。

译者注:这里的textAlign="center"比较特殊。textAlign的值为center时候文本的居中是基于你在fillText的时候所给的x的值,也就是说文本一半在x的左边,一半在x的右边(比较通俗,描述不太清楚,自己实验一下就知道)。所以,如果你想让文本在整个canvas居中,就需要将fillText的x值设置成canvas的宽度的一半。

语法

ctx.textAlign = "left" || "right" || "center" || "start" || "end";

选项

有效值:

left
文本左对齐。
right
文本右对齐。
center
文本居中对齐。
start
文本对齐界线开始的地方 (左对齐指本地从左向右,右对齐指本地从右向左)。
end
文本对齐界线结束的地方 (左对齐指本地从左向右,右对齐指本地从右向左)。

默认值是 start。

译者注:direction属性会对此属性产生影响。如果direction属性设置为ltr,则left和start的效果相同,right和end的效果相同;如果direction属性设置为rtl,则left和end的效果相同,right和start的效果相同。

示例

使用 textAlign 属性

这是一段简单的代码片段,使用 textAlign 属性设置文本的不同对齐方式。

HTML

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

JavaScript

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

ctx.font = "48px serif";
ctx.textAlign = "left";
ctx.strokeText("Hello world", 0, 100);

修改下面的代码并在线查看 canvas 的变化:

规范描述

Specification Status Comment
HTML Living Standard
CanvasRenderingContext2D.textAlign
Living Standard  

浏览器兼容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) 3.5 (1.9.1) 9 (Yes) (Yes)
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) (Yes) 1.0 (1.9.1) (Yes) (Yes) (Yes)

参见

文档标签和贡献者

此页面的贡献者: Jiang-Xuan, ice-i-snow
最后编辑者: Jiang-Xuan,