轻松上手,快乐学习!

HTML canvas textAlign 属性


实例

在位置 150 创建一条红线。位置 150 是下面实例中定义的所有文本的锚点。请研究每种 textAlign 属性值的效果:

YourbrowserdoesnotsupporttheHTML5canvastag.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.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 Yes 9.0 Yes Yes Yes

定义和用法

textAlign 属性根据锚点,设置或返回文本内容的当前对齐方式。

通常,文本会从指定位置开始,不过,如果您设置为 textAlign="right" 并将文本放置到位置 150,那么会在位置 150 结束

提示:请使用 fillText()strokeText() 方法在画布上实际地绘制并定位文本。

默认值: start
JavaScript 语法: context.textAlign="center|end|left|right|start";

属性值

Values 描述 试一试
start 默认。文本在指定的位置开始。 试一试 »
end 文本在指定的位置结束。 试一试 »
center 文本的中心被放置在指定的位置。 试一试 »
left 文本在指定的位置开始。 试一试 »
right 文本在指定的位置结束。 试一试 »