文本
最后更新于：2022-04-02 01:28:00
## 文本
canvas 提供了两种方法来渲染文本：
```
fillText(text, x, y [, maxWidth])
```
在指定的(x,y)位置填充指定的文本，绘制的最大宽度是可选的：
```
strokeText(text, x, y [, maxWidth])
```
在指定的(x,y)位置绘制文本边框，绘制的最大宽度是可选的。
当然，我们也可以改变文本的样式：
| 属性 | 描述 | 范例 |
| :---: | :---: | :---: |
| font | 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。 | ctx.font="30px Arial"; |
| textAlign | 文本对齐选项. 可选的值包括：start, end, left, right, center. 默认值是 start。 | ctx.textAlign = 'end' |
| textBaseline | 基线对齐选项. 可选的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。 | ctx.textBaseline = 'top' |
| direction | 文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。 | ctx.direction = 'ltr' |
font属性的语法：
```
font = 'style variant weight size/line-height family'
```
- style(font-style)：字体样式，可选值：normal, italic, oblique
- variant(font-variant)：字体变体，可选值：normal, small-caps
- weight(font-weight)：字体粗细，可选值：normal, bold, bolder, lighter, 100 - 900
- size/line-height：字号和行高
- family(font-family)：字体
**文本测量**
canvas提供了一个方法：
```
measureText()
```
`measureText()`方法返回的对象中，包含一个名为`width`的属性，它的值代表你传递给该方法的文本所占据的宽度。
';