文本垂直对齐方式

1. 前言

我们前面讲的 canvas 只能绘制单行文本，单行文本怎么会有垂直对齐呢？其实，这里的垂直对齐是指文本基线与单行文本的对齐，类似 CSS 中的 vertical-align概念，本小节我们就来学习一下文本的垂直对齐。

canvas 为我们提供了一个文字基线与文本的垂直关系设置的属性 textBaseline，这里的基线设置和 CSS 的 vertical-align 概念很类似，也可以想象成我们学习拼音时使用的四线三格图。在电脑和手机上，每个汉字或者字符在设计的时候都有自己的排版方式。

例如这样：

在 canvas 中，使用了六线五格的设定，所有的文字都被限制在了“六线五格”里面，这里字母 f 除外，f 在 canvas 绘制文本中属于一个例外。

我们把这六条线从上到下命名为：

top
hanging
middle
alphabetic
ideographic
bottom

明白了上面的，我们就来看 canvas 是怎么设置基线的。

运行结果：

这样我们就绘制了一个文本的垂直对齐。

本小节我们学习了 textBaseline 属性 , 它们是 canvas 2D API 提供的设置文本基线和文本垂直对其方式的属性。

textBaseline 说明

语法：

ctx.textBaseline = value;

取值说明：

value	说明	特别说明
top	文本基线在文本块的顶部。
hanging	文本基线是悬挂基线。
middle	文本基线在文本块的中间。
alphabetic	文本基线是标准的字母基线。
ideographic	文字基线是表意字基线。	如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。
bottom	文本基线在文本块的底部。	与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。

本小节我们主要学习了利用 textBaseline 设定文本垂直对齐方式。