文字渲染"/>
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上渲染是字符串的宽度。
更多推荐
Canvas 文字渲染
发布评论