学习最好的方式就是一边看文档，一边动手，这样可以加深记忆。关于canvas绘制文本的内容你可以点击此处查看 例子 ，进行更好的互动学习。
渲染文本方式
- 填充文本：fillText(text, x, y [, maxWidth])
- 边框文本：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，可选值如下：
- start：文本对齐界线开始的地方 。
- end：文本对齐界线结束的地方 。
- left：文本左对齐 。
- right：文本右对齐 。
- center：文本居中对齐 。
此处的textAlign和css中的text-align 有点区别，css中的text-align 是在父元素上设置，作用在行内元素或者行内块元素上，而此处并没有父元素，直接设置在CanvasRenderingContext2D上，表示方式位设置的对齐方式是设置在人本内容上的start/end/left/right/center，例如：
- start：则文本的最左侧的文本对齐界线设置在x坐标。
- end：则文本的最右侧的文本对齐界线设置在x坐标。
- left：则文本的最左侧的文本设置在x坐标。
- right：则文本的最右侧的文本设置在x坐标。
- center：则文本的中点位置设置在x坐标，所以说如果要想实现在canvas中的居中，可以将x坐标设置为canvas的一半，使用center对齐方式。
使用方式如下：
ctx.textAlign = "left";textBaseline
设置文本的垂直对齐方式，默认对齐方式是 alphabetic，可选值如下：
- top：文本基线在文本块的顶部。
- hanging：文本基线是悬挂基线。
- middle：文本基线在文本块的中间。
- alphabetic：文本基线是标准的字母基线。
- ideographic：文字基线是表意字基线；如果字符本身超出了alphabetic 基线，那么ideograhpic基线位置在字符本身的底部。
- bottom：文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
看文字有点枯燥而且不具体，看看下面这个图（from the WHATWG）展示了textBaseline属性支持的不同的基线情况：
由于默认对齐方式是alphabetic ，所以当我们不设置y坐标（即为0）时，几乎看不到文字，不过我们如果想按照左上角坐标可以设置为top，如下：
ctx.textBaseline = "top";direction
绘制文本时，描述当前文本方向的属性，默认值：inherit，可选值如下：
- ltr：文本方向从左向右。
- rtl：文本方向从右向左。
但好像浏览器兼容性不太好，看MDN上说Chrome是已经实现了，访问chrome://flags 进行设置，可我好像设置了也没起作用。
measureText()
measureText()方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）。
例如：
var text = ctx.measureText("樊小书生");
text.width;有了预测量文本宽度我们就可以做很多事，例如事先知道一段字符在canvas中是否可以绘制的下。