【文本】HTML5 Canvas文本度量measureText()

介绍

在canvas绘图环境中,measureText()方法可以度量字体的宽度。measureText()方法返回了一个包含width属性的TextMetrics对象,后期我们会使用这个方法实现文本编辑器。

measureText()方法的用法
方法 描述了
TextMetrics measureText(DOMString text)

返回一个TextMetrics对象,包含的width属性代表传入文本的像素宽度,该宽度是基于当亲啊的字形而计算出来的。

警告:在调用measureText()之前设置好字型

在使用measureText()方法时,常见的错误就是在调用完该方法之后,才去设置字型。因为measureText()方法是基于当前字型来计算字符串宽度的,因此调用方法后采取改变字型,所返回的宽度不能反映出那种字型来度量的是实际文本宽度。

演示

该演示展示了使用measureText()展示字符串“Hello”的宽度

在线演示 详细代码

发布了122 篇原创文章 · 获赞 25 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/HuoYiHengYuan/article/details/102498121
今日推荐