文本水平对齐方式

1. 前言

文本对齐方式针对的是我们前两节讲的绘制文本的方法，文本对齐方式分为水平对齐和垂直对齐两种，本小节我们学习水平对齐方式的设定。

2. 水平对齐

我们前两节在学习绘制文本的时候，都是设定了一行文字和一对坐标点后开始绘制的，绘制的文本也是从我们给定的点开始。当然，canvas 也是支持将我们给定的点作为单行文本的中点或者终点，这就要用到文本水平对齐属性：textAlign了。

我们看一个例子：

运行结果：

我们将上面例子的主要内容拆分讲解：

1. 设置字体大小以及字体样式，font 属性属于全局属性，设定一次，后面所有绘制都会受到影响。

   ctx.font="20px 微软雅黑"
   

2. 设定水平对齐方式为左对齐，即以我们给定的锚点 (150, 30) 为文本起点，left 值也是默认值。

   ctx.textAlign = "left"
   ctx.fillText("xxWiki", 150, 30)
   

3. 设定水平对齐方式为居中对齐，即以我们给定的锚点 (150, 80) 为文本中点。

   ctx.textAlign = "center"
   ctx.fillText("xxWiki", 150, 80)
   

4. 设定水平对齐方式为右对齐，即以我们给定的锚点 (150, 130) 为文本最右点。

   ctx.textAlign = "right"
   ctx.fillText("xxWiki", 150, 130)
   

5. 绘制一条辅助参考线。

   ctx.beginPath()
    ctx.strokeStyle="#ccc";
    ctx.moveTo(150,0);
    ctx.lineTo(150,150);
    ctx.stroke();
   

3.水平对齐进阶学习

上面我们列举了 textAlign 的三个值，left，center，right，其实 textAlign 属性还有两个值：start 和 end，这两个值在默认情况下和 left、right 的作用完全一样，即：start 等同于 left，end 等同于 right，那么问题来了，start 和 left 在什么情况下表现不相同呢？

要想回答上面的问题，我们需要先弄明白 浏览器的文本方向。

我们使用的浏览器默认的文本方向都是从左向右的，即 ltr 模式，这和我们的阅读习惯是相同的（ltr = left to right），但是浏览器还提供了一种阅读方式，rtl 模式，就是从右向左的阅读方向。

在浏览器 ltr 模式下，也就是正常模式下，start 的作用和 left 是相同的，end 的作用和 right 的作用是相同的。

如果浏览器设置了文本方向从右向左，即 rtl 模式，那么对齐方式刚好相反，start 的作用和 right 是相同的， end 的表现和 left 的表现是相同的。

canvas也为我们提供了修改画布文本方向的属性 direction，该属性可以修改画布的文本方向，该属性主要影响 start 和 end 的表现。

direction 属性还未被纳入标准文档，所以兼容性很差，平时不建议使用 。

我们看一个案例，请使用最新 chrome 浏览器查看本案例。

运行结果：

我们可以从运行结果中看出，当设定了画布的文本方向为 rtl 后，再绘制的红色文字，只有 start 和 end 的位置切换了，left、right、center都没有受到影响。

4. 属性整理

本小节我们学习了 textAlign 属性和 direction 属性 , 它们是 canvas 2D API 提供的设置文本对齐方式的属性。

4.1 对齐设置 textAlign

textAlign 说明

• textAlign 是 canvas 2D API 提供的设置文本对齐方式的属性。
• 默认值：start。

特别说明：
该属性是针对 fillText 和 strokeText 方法的 X 的值，所以如果 textAlign = “center”，那么该文本将画在 X - 50% * width 的位置。

语法：

ctx.textAlign = value;

取值说明：

value可取如下值：

补充

1. 如果你想让文本在整个 canvas 居中，只需要将 fillText 的 X 值设置成 canvas 的宽度的一半，textAlign 值设置成 center。
2. start 和 stop 默认情况下是等同于 left 和 right 的，如果设置 direction 的值为：rtl，则刚好相反。
3. direction 属性还未被纳入标准文档，兼容性很差，所以针对 start 和 end 的使用参照 left 和 right。

4.2 文本方向 direction

direction 说明

• direction 是 canvas 2D API 提供的设置文本方向的属性。
• 默认值：ltr。

语法：

ctx.direction = value;

取值说明：

value可取如下值：

5. 总结

本小节我们主要学习了利用 textAlign 设定文本对齐方式以及 start 和 end 在文本方向不同时的表现，下一节我们学习文本的垂直对齐。