标签：canvas center 基线 HTML5 对齐 文本 绘制

# 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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。