首页 > 网页制作 > html5

HTML5 Canvas实现文本对齐的方法总结

admin html5 2022-02-06 13:53:21 HTML5   Canvas   文本"

水平对齐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)

    版权声明

    本文仅代表作者观点,不代表本站立场。
    本文系作者授权发表,未经许可,不得转载。
    本文地址:/web/html5/77179.html

    留言与评论(共有 0 条评论)
       
    验证码:

    热门文章

    最近发表

    标签列表

    潘少俊衡

    | 桂ICP备2023010378号-4

    Powered By EmpireCMS

    爱享小站

    中德益农

    谷姐神农

    环亚肥料

    使用手机软件扫描微信二维码

    关注我们可获取更多热点资讯

    感谢潘少俊衡友情技术支持