HTML canvas textAlign 属性
实例
在位置 150 创建一条红线。位置 150 是下例中定义的所有文本的锚点。 研究每个 textAlign 属性值的效果:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create a red line in position 150
ctx.strokeStyle = "red";
ctx.moveTo(150, 20);
ctx.lineTo(150, 170);
ctx.stroke();
ctx.font = "15px Arial";
// Show the different textAlign values
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 | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定义和用法
textAlign 属性根据锚点设置或返回文本内容的当前对齐方式。
通常，文本将在指定位置START，但是，如果您设置 textAlign="right"; 并将文本放置在位置 150，这意味着文本应该 END 在position 150。
提示: 使用 fillText() 或 strokeText() 方法来实际绘制和 在画布上放置文本。
| 默认值: | start |
|---|---|
| JavaScript 语法: | context.textAlign = "center|end|left|right|start"; |
属性值
| Values | 描述 | Play it |
|---|---|---|
| start | 默认。 文本从指定位置开始 | Play it » |
| end | 文本在指定位置结束 | Play it » |
| center | 文本中心放置在指定位置 | Play it » |
| left | 文本从指定位置开始 | Play it » |
| right | 文本在指定位置结束 | Play it » |
❮ Canvas 对象
