您现在的位置是：网站首页> 编程资料编程资料

HTML5 Canvas实现文本对齐的方法总结_html5_网页制作_

2021-09-13 905人已围观

简介 这篇文章主要介绍了HTML5 Canvas实现文本对齐的方法总结,包括使用水平对齐的context.textAlign与垂直对齐的context.textBaseline两种方式及各种参数,需要的朋友可以参考下

水平对齐textAlign

JavaScript Code复制内容到剪贴板
  1. context.textAlign="center|end|left|right|start";  

其中各值及意义如下表。

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

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

JavaScript Code复制内容到剪贴板
  1.   
  2. "zh">   
  3.   
  4.     "UTF-8">   
  5.     textAlign   
  6.        
  7.   
  8.   
  9. "canvas-warp">   
  10.     "canvas">   
  11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  12.        
  
  •   
  •   
  •   
  •   

    • 运行结果：
    2016324114332033.jpg (850×500)

    垂直对齐textBaseline

    JavaScript Code复制内容到剪贴板
    1. context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";  

    其中各值及意义如下表。

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

    首先咱们通过一个图来看一下各个基线代表的位置。
    2016324114358024.gif (600×268)

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

    JavaScript Code复制内容到剪贴板
    1.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.     textBaseline   
    6.        
    7.   
    8.   
    9. "canvas-warp">   
    10.     "canvas">   
    11.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    12.        
      
  •   
  •   
  •   
  •   

    • 运行结果：
    2016324114419550.jpg (850×500)

    上一篇：HTML5仿手机微信聊天界面_html5_网页制作_

    下一篇：使用HTML5 Canvas API中的clip()方法裁剪区域图像_html5_网页制作_

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网