文字的渲染和css样式中的font属性设置很相识，其理念是相通的
几个常用属性：
- font
- fillText(), strokeText()： 注意最后有个可选参数'maxLength',用来设置文字的宽度
- textAlign, textBaseline
- mesureText(string).width: 获取字符串显示的宽度(单位： px)
一.渲染文字
最基本的示例：
ctx.font = 'bold 20px Arial';
// 这个fillStyle 可以使用
// createPattern中函数进行更丰富的设置
ctx.fillStyle = 'red'
ctx.fillText('hello canvas', 100, 100)
当然也可以使用 strokeText() 对字体进行描边
二.API 讲解
1.fillText() | strokeText()
函数签名：
/*
* @param string: 就是要绘制的文字
* @param x, y: 绘制开始的坐标(x, y)
* @param [maxLen]: 可选参数，绘制上面文字，允许的最大宽度
*/
fillStyle(string, x, y, [maxLen])
strokeStyle(string, x, y, [maxLen])
示例：
fillText('hello canvas', 100, 100)
fillText('hello canvas', 100, 200, 400)
2.font
默认值： '20px sans-serif'
ctx.font =
font-style font-variant font-weight
font-size font-family
可以看出和css中font的设置一样，但是canvas中如果设置font则至少要设置字体大小和字体类型2个值
说一下比较少见的font-variant属性：
font-variant: normal (默认值)
small-caps // 表示字号不变，将字母设置为大写
3.textAlign 文本对齐
这个和css中 text-align一致,用来绘制横向坐标对齐：
ctx.textAlign = left
center
right
4.textBaseline
这个和css中 vertical-align一致，用于设置文本的基准线对齐方式：
ctx.textBaseline = top
middle
bottom
5.measureText(string).width
计算渲染文字的宽度
调用这个函数之前必须先设置好font属性，因为font属性会影响这个属性的值
ctx.measureText(string).width
总结
文字的绘制和css样式中设置文字的属性比较相似，当时canvas中的一些其它属性，比如fillStyle, strokeStyle等使得文字更加的强大
