Canvas 文字渲染

文字渲染"/>

Canvas 文字渲染

Canvas 文字渲染

文字渲染基础：首先定义font属性，然后用fillText()对文字进行渲染。

context.font = “bold 40px Arial”;
context.fillText(string,x,y,[maxlen]);

其中，fillText()的第一个参数是要书写的字符串，第二、三个参数是书写的位置，第四个参数是可选参数，它描述的是绘制这一行文字的最长宽度，单位是像素；
除此之外canvas还有strokeText(string,x,y,[maxlen]) 方法来为文字描边。

文字渲染的基本内容：
1.font
font默认值：“20px sans-serif”
font可以对font-style、font-variant、font-weight、font-size、font-family进行设定；

• font-style：normal / italic（斜体字）/ oblique（倾斜字体）
• font-variant：normal / small-caps（以小写字母的型号来显示大写字母）
• font-weight：lighter / normal / bold / bolder / 数字100-900
• font-size：20px / 2em / 150% / xx-small / x-small / medium / large / x-large / xx-large
• font-family：设置多种字体备选 支持@font-face web安全字体

2.文本对齐
textAlign定义文字水平方向的对齐方式，textBaseline 定义文字垂直方向的对齐方式；它们的基准是给定文本的基础坐标值；
context.textAlign = left / center / right;
context.textBaseline = top / middle / bottom / alphabetic（default） / ideographic / hanging;
其中，alphabetic是指基于拉丁字母来设计基准线，ideographic是指基于汉字等方块文字来设计基准线，hanging是指基于印度文字来设计基准线。

3.文本的度量
context.measureText(string).width
该方法传入一个字符串，它将返回一个对象，这个对象拥有一个width的属性来描述传入字符串在canvas上渲染是字符串的宽度。