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


    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("你需要测量长度的字符串")
    //那么大家要有疑问了,字体的高度呢?高度该怎么算呢?
    //我认为和字体的大小一样就可以了,就是字体18px,那么高度也差不多18px。
    

    延伸阅读:
    关于em square的——EM Square

  • 相关阅读:
    gridFS-Nginx的安装与使用
    centos下利用phantomjs来完成网站页面快照截图
    linux下安装php的svn模块
    在Thinkphp3.1中使用Mongo的具体操作
    CentOS 6.4安装mongo的php扩展包
    在centos6.3下安装php的Xdebug
    在yum安装lamp的环境下安装coreseek以及php的sphinx扩展
    CentOS 6.4下通过YUM快速安装配置LAMP服务器(Apache+PHP5+MySQL)
    微信中web页面实现和公众号中查看图片一样的效果
    ionic学习教程地址梳理
  • 原文地址:https://www.cnblogs.com/cherryvenus/p/8583001.html
Copyright © 2020-2023  润新知