135-1821-9792

怎么在HTML5中使用Canvas对齐文本

本篇文章给大家分享的是有关怎么在HTML5中使用Canvas对齐文本,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

成都创新互联公司技术团队10余年来致力于为客户提供成都做网站、网站设计、成都品牌网站建设成都全网营销、搜索引擎SEO优化等服务。经过多年发展,公司拥有经验丰富的技术团队,先后服务、推广了数千家网站,包括各类中小企业、企事单位、高校等机构单位。

水平对齐textAlign

JavaScript Code复制内容到剪贴板

  1. context.textAlign="center|end|left|right|start";  

其中各值及意义如下表。

描述
start默认。文本在指定的位置开始。
end文本在指定的位置结束。
center文本的中心被放置在指定的位置。
left文本左对齐,
right文本右对齐。

我们通过一个例子来直观的感受一下。

JavaScript Code复制内容到剪贴板

  1.   

  2.   

  3.   

  4.        

  5.     textAlign   

  6.        

  7.   

  8.   

  9.   

  10.        

  11.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   

  12.        

  

  •   

  •   

  •   

  •   

  • 运行结果:
    怎么在HTML5中使用Canvas对齐文本

    垂直对齐textBaseline

    JavaScript Code复制内容到剪贴板

    1. context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";  

    其中各值及意义如下表。

    描述
    alphabetic默认。文本基线是普通的字母基线。
    top文本基线是em方框的顶端。
    hanging文本基线是悬挂基线。
    middle文本基线是em方框的正中。
    ideographic文本基线是表意基线。
    bottom文本基线是em方框的底端。


    首先咱们通过一个图来看一下各个基线代表的位置。
    怎么在HTML5中使用Canvas对齐文本

    我们通过一个例子来直观的感受一下。

    JavaScript Code复制内容到剪贴板

    1.    
         
         
             
          textBaseline   
             
         
         
         
             
              你的浏览器居然不支持Canvas?!赶快换一个吧!!   
             
      
                  

    以上就是怎么在HTML5中使用Canvas对齐文本,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。


    网站栏目:怎么在HTML5中使用Canvas对齐文本
    网站链接:http://kswsj.com/article/jejooi.html

    其他资讯

    

    Copyright © 2009-2022 www.kswsj.com 成都快上网科技有限公司 版权所有 蜀ICP备19037934号