[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`对象，包含关于文本尺寸的信息（例如文本的宽度） ### 4.canvas中文水平居中   ### 5.文本阴影 `shadowOffsetX = float` `shadowOffsetY = float` `shadowOffsetX` 和`shadowOffsetY`用来设置阴影在x轴和y轴的延伸距离 他们默认都是0 shadowBlur=float shadowBlur用来设定阴影的模糊程度，其数值并不跟像素数量挂钩，也不受变换矩阵的影响，默认为0。

标签：canvas,center,基线,HTML5,对齐,文本,绘制
来源： https://www.cnblogs.com/yang10086/p/16676357.html