HTML canvas textAlign 属性

实例

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

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

JavaScript:

  1. var c=document.getElementById("myCanvas");
  2. var ctx=c.getContext("2d");
  3. // 在位置 150 创建蓝线
  4. ctx.strokeStyle="blue";
  5. ctx.moveTo(150,20);
  6. ctx.lineTo(150,170);
  7. ctx.stroke();
  8. ctx.font="15px Arial";
  9. // 显示不同的 textAlign 值
  10. ctx.textAlign="start";
  11. ctx.fillText("textAlign=start",150,60);
  12. ctx.textAlign="end";
  13. ctx.fillText("textAlign=end",150,80);
  14. ctx.textAlign="left";
  15. ctx.fillText("textAlign=left",150,100);
  16. ctx.textAlign="center";
  17. ctx.fillText("textAlign=center",150,120);
  18. ctx.textAlign="right";
  19. ctx.fillText("textAlign=right",150,140);

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 textAlign 属性。

注释:Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

定义和用法

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

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

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

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

属性值

描述
start 默认。文本在指定的位置开始。
end 文本在指定的位置结束。
center 文本的中心被放置在指定的位置。
left 文本左对齐。
right 文本右对齐。