【HTML5】canvas的文本
canvas 提供了两种方法来渲染文本:
fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的:
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的。
当然,我们也可以改变文本的样式:
属性 | 描述 | 范例 |
---|---|---|
font | 当前我们用来绘制文本的样式. 这个字符串使用和 CSS font 属性相同的语法. 默认的字体是 10px sans-serif。 | ctx.font=”30px Arial”; |
textAlign | 文本对齐选项. 可选的值包括:start, end, left, right, center. 默认值是 start。 | ctx.textAlign = ‘end’ |
textBaseline | 基线对齐选项. 可选的值包括:top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic。 | ctx.textBaseline = ‘top’ |
direction | 文本方向。可能的值包括:ltr, rtl, inherit。默认值是 inherit。 | ctx.direction = ‘ltr’ |
font属性的语法:
font = 'style variant weight size/line-height family'
- style(font-style):字体样式,可选值:normal, italic, oblique
- variant(font-variant):字体变体,可选值:normal, small-caps
- weight(font-weight):字体粗细,可选值:normal, bold, bolder, lighter, 100 – 900
- size/line-height:字号和行高
- family(font-family):字体
文本测量
canvas提供了一个方法:
measureText()
measureText()
方法返回的对象中,包含一个名为width
的属性,它的值代表你传递给该方法的文本所占据的宽度。
- 洗漱包旅行套装 男出差商务洗簌袋便携化妆包女用品洗护大容量
- 蓝罐(Kjeldsens)曲奇饼干礼盒 454g 丹麦原装进口 休闲零食 节日送礼福利团购
- 适用于新款车载手机支架无线器快充智能自动感应汽车
- 皇顺适配名爵MG7汽车用品MG6PRO改装饰配件MG5门槛条ZS保护贴
温馨提示 : 非特殊注明,否则均为©李联华的博客网原创文章,本站文章未经授权禁止任何形式转载;IP地址:3.142.98.60,归属地:俄亥俄州Dublin ,欢迎您的访问!
文章链接:https://www.lilianhua.com/html5-canvas-text.html
文章链接:https://www.lilianhua.com/html5-canvas-text.html