JavaScript 参考手册 目录

HTML Canvas textalign 属性

在 HTML Canvas 中,我们经常需要绘制文本。为了让文本在 Canvas 中的位置更加灵活和精确,我们可以使用 textalign 属性来控制文本的对齐方式。textalign 属性可以设置文本相对于给定的坐标的对齐方式,包括左对齐、居中和右对齐。

使用 textalign 属性

在 Canvas 中,我们可以通过以下代码来设置文本的对齐方式:

----- ------ - ------------------------------------
----- --- - ------------------------

-------- - ----- -------
------------- - ---------
------------------- ------- ------------ - -- ------------- - ---

在上面的代码中,我们首先获取了 Canvas 元素和 2D 上下文,然后设置了文本的字体大小为 20px,并使用 textAlign 属性将文本居中对齐。最后使用 fillText 方法在 Canvas 中绘制了文本 "Hello World"。

textalign 属性值

textalign 属性可以接受以下三个值:

  • start:默认值,文本在给定的坐标的起始位置对齐。
  • center:文本在给定的坐标的中心位置对齐。
  • end:文本在给定的坐标的结束位置对齐。

示例

下面是一个简单的示例,演示了如何使用 textalign 属性来控制文本的对齐方式:

----- ------ - ------------------------------------
----- --- - ------------------------

-------- - ----- -------

-- ---
------------- - --------
------------------ --------- --- ----

-- --
------------- - ---------
-------------------- --------- ------------ - -- -----

-- ---
------------- - ------
------------------- --------- ------------ - --- -----

在上面的示例中,我们分别使用了 startcenterend 三种对齐方式,绘制了左对齐、居中和右对齐的文本。

通过灵活运用 textalign 属性,我们可以更好地控制文本在 Canvas 中的位置,使得我们的 Canvas 应用更加灵活和美观。


下一篇:概览