#6 文字的渲染

文字的渲染和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等使得文字更加的强大