canvas教程

学习canvas.drawText(2)

字号+ 作者:H5之家 来源:H5之家 2017-01-15 14:02 我要评论( )

效果图: FontMetrics: 1. 浅黄色区域就是文字的FontMetrics区域,可以看出来文字实在此区域垂直居中绘制 2. 红色线:为FontMetrics的top 3. 灰色线:为FontMetrics的ascent 4. 黄色线:为FontMetrics的leading 5.

效果图:

这里写图片描述


FontMetrics:
1. 浅黄色区域就是文字的FontMetrics区域,可以看出来文字实在此区域垂直居中绘制
2. 红色线:为FontMetrics的top
3. 灰色线:为FontMetrics的ascent
4. 黄色线:为FontMetrics的leading
5. 蓝色线:为baseline线
6. 白色线:为FontMetrics的descent
7. 绿色线:为FontMetrics的bottom
Rect:
1. 第一个小黑矩形为“测”字的rect区域
2. 第二个长黑矩形为“测试:12hg”字的rect区域

总结

只要彻底弄明白baseline才能轻松掌握drawText接口,才不至于开发的时候总是搞不明白绘制的文字要么偏上要么偏下。

参考





 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas学习之路(一)基础绘图功能解析

    canvas学习之路(一)基础绘图功能解析

    2017-01-15 14:03

  • 如何学习web前端开发 有没有什么技巧

    如何学习web前端开发 有没有什么技巧

    2017-01-15 13:02

  • canvas基础学习(二),canvas基础学习

    canvas基础学习(二),canvas基础学习

    2017-01-14 08:00

  • canvas学习(一)

    canvas学习(一)

    2017-01-13 18:04

网友点评