canvas教程

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

字号+ 作者:十年灯 来源:jo2 2015-09-07 14:23 我要评论( )

measureText就是用来测量文字尺寸的,他 有返回值 。 ctx.measureText(text) measureText的返回值是一个对象,但里面只有一个属性: width ,本来文字的尺寸应该有width也有height,但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.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

网友点评