HTML5 Canvas实现文本对齐的方法总结_html5教程技巧

水平对齐textAlign

1. context.textAlign="center|end|left|right|start";

其中各值及意义如下表。

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

我们通过一个例子来直观的感受一下。

2. "zh">
4. "UTF-8">
10. "canvas">
11. 你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

垂直对齐textBaseline

1. context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

其中各值及意义如下表。

值	描述
alphabetic	默认。文本基线是普通的字母基线。
top	文本基线是em方框的顶端。
hanging	文本基线是悬挂基线。
middle	文本基线是em方框的正中。
ideographic	文本基线是表意基线。
bottom	文本基线是em方框的底端。

首先咱们通过一个图来看一下各个基线代表的位置。

我们通过一个例子来直观的感受一下。

2. "zh">
4. "UTF-8">
10. "canvas">
11. 你的浏览器居然不支持Canvas？！赶快换一个吧！！