canvas应用——绘制文本

学习最好的方式就是一边看文档，一边动手，这样可以加深记忆。关于canvas绘制文本的内容你可以点击此处查看 例子 ，进行更好的互动学习。

渲染文本方式

1. 填充文本：fillText(text, x, y [, maxWidth])
2. 边框文本：strokeText(text, x, y [, maxWidth])

参数说明：

• text:要渲染的文本内容
• x:开始渲染文本的x坐标
• y:开始渲染文本的y坐标
• maxWidth:选填，文本绘制的最大宽度（当文本内容过多的时候，设置的最大宽度又不足以放下这么多文字的时候，文字会被横向压缩以使其可以放下）

当然了，在canvas里面我们也可以像css里去定义样式：

文本样式

font

设置文字的 font-style, font-variant, font-weight, font-size, line-height 和 font-family，用法和css的font语法一致，默认的字体是 10px sans-serif，例如：

ctx.font = "24px 'Helvetica Neue','Helvetica','Microsoft YaHei','WenQuanYi Micro Hei',Arial,sans-serif";

textAlign

设置文本的水平对齐方式，默认对齐方式是 start，可选值如下：

1. start：文本对齐界线开始的地方 。
2. end：文本对齐界线结束的地方 。
3. left：文本左对齐 。
4. right：文本右对齐 。
5. center：文本居中对齐 。

此处的textAlign和css中的text-align 有点区别，css中的text-align 是在父元素上设置，作用在行内元素或者行内块元素上，而此处并没有父元素，直接设置在CanvasRenderingContext2D上，表示方式位设置的对齐方式是设置在人本内容上的start/end/left/right/center，例如：

1. start：则文本的最左侧的文本对齐界线设置在x坐标。
2. end：则文本的最右侧的文本对齐界线设置在x坐标。
3. left：则文本的最左侧的文本设置在x坐标。
4. right：则文本的最右侧的文本设置在x坐标。
5. center：则文本的中点位置设置在x坐标，所以说如果要想实现在canvas中的居中，可以将x坐标设置为canvas的一半，使用center对齐方式。

使用方式如下：

ctx.textAlign = "left";

textBaseline

设置文本的垂直对齐方式，默认对齐方式是 alphabetic，可选值如下：

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

看文字有点枯燥而且不具体，看看下面这个图（from the WHATWG）展示了textBaseline属性支持的不同的基线情况：

由于默认对齐方式是alphabetic ，所以当我们不设置y坐标（即为0）时，几乎看不到文字，不过我们如果想按照左上角坐标可以设置为top，如下：

ctx.textBaseline = "top";

direction

绘制文本时，描述当前文本方向的属性，默认值：inherit，可选值如下：

1. ltr：文本方向从左向右。
2. rtl：文本方向从右向左。

但好像浏览器兼容性不太好，看MDN上说Chrome是已经实现了，访问chrome://flags 进行设置，可我好像设置了也没起作用。

measureText()

measureText()方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）。

例如：

var text = ctx.measureText("樊小书生");
text.width;

有了预测量文本宽度我们就可以做很多事，例如事先知道一段字符在canvas中是否可以绘制的下。