码迷,mamicode.com
首页 > 其他好文 > 详细

canvas练手项目(三)——Canvas中的Text文本

时间:2018-04-17 19:52:53      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:graphic   方法   微软雅黑   哈哈   比较   text   行高   优雅   baseline   

Canvas中的Text文本也是一个知识点~,我们需要掌握一下几个基本的Text操作方法

首先是重要参数textAlign和textBaseline:

textAlign

  • left
  • center
  • right
  • start (default)
  • end

textBaseline

  • alphabetic (default)【适合Latin文字类,“abc”】
  • hanging【适合一些印地语,“?????”】
  • ideographic【适合中文之类的,“哈哈哈”】
  • top
  • middle
  • bottom

前三个是根据字体来说的比较合适的选择,而后面三个就是给予em square而定的。

em square 就是方格字的意思,每个字体,比如微软雅黑,都有自己的方格大小,top就是方格的头部,bottom就是方格的底部,但是不可能每个字都撑满一个方格的,所以top,bottom总是会留一些空白的。

给大家一个直观的感受 点击

接着是写字的方法fillText和strokeText

实心字体

context.fillText(“你的字符穿”, X轴坐标,  Y轴坐标, MaxWidth)//超过MaxWidth,文字就会被压缩

镂空字体

context.strokeText(“你的字符穿”, X轴坐标,  Y轴坐标, MaxWidth)//超过MaxWidth,文字就会被压缩,就感觉字被压扁的感觉,哈哈哈哈
//如何优雅地在canvas上写字
context.font="18px 微软雅黑"//和css中的font一样,不过没有了行高
context.textAlign=“center”//和css中的text-align一样
context.textBaseline=“top”//这个是文本基线的意思
context.fillStyle = ‘red‘;//你的字体颜色
context.fillText(“你的字符穿”, X轴坐标,  Y轴坐标, MaxWidth)//超过MaxWidth,文字就会被压缩
//通过以上面设置的字体参数,可以用以下方法得出字体的长度
context.measureText("你需要测量长度的字符串")
//那么大家要有疑问了,字体的高度呢?行高该怎么算呢?

canvas练手项目(三)——Canvas中的Text文本

标签:graphic   方法   微软雅黑   哈哈   比较   text   行高   优雅   baseline   

原文地址:https://www.cnblogs.com/cherryvenus/p/8583001.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!