[HTML5]canvas绘制文本

# canvas绘制文本

## 1.绘制文本的方法

`canvas`提供了两种方法来渲染文本

`fillText(text,x,y);`

在指定的(x,y)位置填充指定的文本

 

`strokeText(text,x,y);`

在指定的(x,y)位置绘制文本边框

## 2.文本样式

 

`font=value`

当前我们用来绘制文本的样式，这个字符串使用和CSS font属性相同的语法

默认的字体时`10px sans-serif`

font属性指定时，大小字体，缺一不可。

 

`textAlign=value`

文本对齐选项，可选的值包括：left，right，center。

`left`：文本向左对齐

`right`：文本向右对齐

`center`：文本居中对齐

这里的`textAlign=center`比较特殊。`textAlign`的值为`center`的时候

文本的居中时基于你在`fillText`的时候所给的x的值

也就是说文本一半在x的左边，一般在x的右边

 

`textBaseline=value`

描述绘制文本时，当前文本基线的属性。

`top`

文本基线在文本块的顶部。

`middle`

文本基线在文本的中间。

`bottom`

文本基线在文本块的底部。

 

## 3.measereText

`measereText()`方法返回一个`TextMetrics`对象，包含关于文本尺寸的信息（例如文本的宽度）

```js

var w = ctx.measureText("啊我答复").width;

```

### 4.canvas中文水平垂直居中

 

### 5.文本阴影

`shadowOffsetX = float`

`shadowOffsetY = float`

`shadowOffsetX` 和`shadowOffsetY`用来设置阴影在x轴和y轴的延伸距离

他们默认都是0

shadowBlur=float

shadowBlur用来设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为0。