在 HTML5 中，我们可以使用 <canvas> 元素来绘制图形、动画以及其他视觉效果。其中，<canvas> 元素提供了一个属性 textBaseline，用于设置文本基线的对齐方式。文本基线是文本的基准线，用于确定文本的垂直位置。
textBaseline 属性的取值
textBaseline 属性有以下几种取值：
alphabetic：默认值，文本基线是普通的字母基线top：文本基线是文本的顶端hanging：文本基线是悬挂基线middle：文本基线是中间基线ideographic：文本基线是表意基线bottom：文本基线是文本的底端
示例代码
下面是一个简单的示例代码，演示了如何使用 textBaseline 属性来设置文本基线的对齐方式：
--------- -----
------
------
------------- ------------ ---------------
-------
------
------- ------------- ----------- ----------------------
--------
--- ------ - ------------------------------------
--- --- - ------------------------
-------- - ----- -------
---------------- - ------
----------------- ---------- --- ----
---------------- - ---------
-------------------- ---------- --- ----
---------------- - ---------
-------------------- ---------- --- ----
---------
-------
-------在上面的示例中，我们创建了一个 <canvas> 元素，并通过 JavaScript 获取了其上下文。然后，我们使用 fillText() 方法绘制了三行文本，分别设置了不同的文本基线对齐方式。
总结
通过使用 textBaseline 属性，我们可以轻松地控制文本在 <canvas> 元素中的垂直对齐方式，从而实现更加灵活多样的文本布局效果。在实际开发中，可以根据具体需求选择合适的文本基线对齐方式，从而达到更好的视觉效果。