html5 Canvas画图教程24:测量文字尺寸measureText

本文属于《html5 Canvas画图系列教程

前不久我讲了在canvas中写字的方法,measureText和这个问题有关。我们通常需要知道文字的大小,以确定该把字写在哪里。

measureText就是用来测量文字尺寸的,他有返回值

ctx.measureText(‘text’)

measureText的返回值是一个对象,但里面只有一个属性:width,本来文字的尺寸应该有width也有height,但canvas中的文字连行高都没有,所以measureText也没法得出高度。

所以说呢,measureText的作用不大。

另外,font的设置会对measureText的结果造成不易察觉的影响,比如前面我讲的font设置中的那一串可有可无的属性:caption,icon,menu,message-box,small-caption,status-bar,如果设置了他们,由于浏览器各自的呈现不一样,那么measureText得出的宽度也就不一样了。

比如,我测试

ctx.font = “bolder 33px Arial menu”;

形态下的’1223’,firefox最终结果66,而chrome则是72.去掉menu后,则一个是73,一个是72——也不完全一样,搞毛啊。

measureText只是单纯的测量文字,与是否把文字写到canvas上无关。

这个方法不好用,或者以后会有改进吧。

1 评论

发表评论

电子邮件地址不会被公开。