5.绘制文本
5.1.strokeText方法
通过strokeText方法可以绘制描边的文本
// 语法
ctx.strokeText(text, x, y [, maxWidth]);
参数说明
text 使用当前 font，textAlign，textBaseline和direction 的值对文本进行渲染。
x 文本起始点的 x 轴坐标。
y 文本起始点的 y 轴坐标。
maxWidth 可选,需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体
实例：
var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
// 定义字体属性
ctx.font = "bold 80px 微软雅黑"
ctx.strokeText('螺钉课堂', 100, 100)
5.2.fillText方法
和strokeText类似，fillText可以绘制填充文本
// 语法
ctx.fillText(text, x, y [, maxWidth])
参数和strokeText一样
实例：
var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
// 定义字体属性
ctx.font = "bold 80px 微软雅黑"
ctx.fillText('螺钉课堂', 100, 100)
5.3.measureText方法
方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）,配合这个方法使文本居中比较方便
ctx.measureText(text)
参数和返回值说明
参数：
text 需要测量的文本。
返回值：
TextMetrics 对象
实例：
var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
var text = '螺钉课堂'
// 定义字体属性
ctx.font = "bold 80px 微软雅黑"
var position = oCanvas.width / 2 - ctx.measureText(text).width / 2
ctx.strokeText(text, position, 100)
5.4.文本相关属性
1.font属性
font属性和css中的用法一样
// 语法
ctx.font = "font-style font-weight font-size/font-height font-family"
2.textAlign属性
textAlign用来设置水平方向的对齐方式
ctx.textAlign = '属性值'
这里的属性值可以为：
start 开始位置，指定坐标
end 结束位置，指定坐标
left 左对齐
right 右对齐
center 居中对齐
3.textBaseLine属性
textBaseLine用来设置垂直方向的对齐方式
// 语法
ctx.textBaseline = '属性值'
属性值有：
top 文本基线在文本块的顶部。
middle 文本基线在文本块的中间。
bottom 文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
alphabetic 文本基线是标准的字母基线。