首页 > web前端 > H5教程 > 正文

HTML5 Canvas实现文本对齐的方法总结_html5教程技巧

WBOY
发布: 2016-05-16 15:51:59
原创
1780 人浏览过

水平对齐textAlign

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

其中各值及意义如下表。

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

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

JavaScript Code复制内容到剪贴板
  1. nbsp;html>   
  2. "zh">   
  3.   
  4.      "UTF-8">   
  5.     textAlign   
  6.     
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.        
  10.   
  11.   
  12. "canvas-warp">   
  13.     "canvas">   
  14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
  15.        
  
  •   
  • <script> </script>
  •     window.onload = function(){   
  •         var canvas = document.getElementById("canvas");   
  •         canvas.width = 800;   
  •         canvas.height = 600;   
  •         var context = canvas.getContext("2d");   
  •         context.fillStyle = "#FFF";   
  •         context.fillRect(0,0,800,600);   
  •   
  •         // 在位置 400 创建蓝线   
  •         context.strokeStyle="blue";   
  •         context.moveTo(400,100);   
  •         context.lineTo(400,500);   
  •         context.stroke();   
  •   
  •   
  •         context.fillStyle = "#000";   
  •         context.font="50px Arial";   
  •   
  •         // 显示不同的 textAlign 值   
  •         context.textAlign="start";   
  •         context.fillText("textAlign=start", 400, 120);   
  •         context.textAlign="end";   
  •         context.fillText("textAlign=end", 400, 200);   
  •         context.textAlign="left";   
  •         context.fillText("textAlign=left", 400, 280);   
  •         context.textAlign="center";   
  •         context.fillText("textAlign=center", 400, 360);   
  •         context.textAlign="right";   
  •         context.fillText("textAlign=right", 400, 480);   
  •     };   
  •   
  •   
  •   
  • 运行结果:
    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. nbsp;html>   
    2. "zh">   
    3.   
    4.      "UTF-8">   
    5.     textBaseline   
    6.     
    7.         body { background: url("./images/bg3.jpg") repeat; }  
    8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
    9.        
    10.   
    11.   
    12. "canvas-warp">   
    13.     "canvas">   
    14.         你的浏览器居然不支持Canvas?!赶快换一个吧!!   
    15.        
      
  •   
  • <script> </script>
  •     window.onload = function(){   
  •         var canvas = document.getElementById("canvas");   
  •         canvas.width = 800;   
  •         canvas.height = 600;   
  •         var context = canvas.getContext("2d");   
  •         context.fillStyle = "#FFF";   
  •         context.fillRect(0,0,800,600);   
  •   
  •         //在位置 y=300 绘制蓝色线条   
  •         context.strokeStyle="blue";   
  •         context.moveTo(0,300);   
  •         context.lineTo(800,300);   
  •         context.stroke();   
  •   
  •         context.fillStyle = "#00AAAA";   
  •         context.font="20px Arial";   
  •   
  •         //在 y=300 以不同的 textBaseline 值放置每个单词   
  •         context.textBaseline="top";   
  •         context.fillText("Top",150,300);   
  •         context.textBaseline="bottom";   
  •         context.fillText("Bottom",250,300);   
  •         context.textBaseline="middle";   
  •         context.fillText("Middle",350,300);   
  •         context.textBaseline="alphabetic";   
  •         context.fillText("Alphabetic",450,300);   
  •         context.textBaseline="hanging";   
  •         context.fillText("Hanging",550,300);   
  •     };   
  •   
  •   
  •   
  • 运行结果:
    2016324114419550.jpg (850×500)

    相关标签:
    来源:php.cn
    上一篇:HTML5仿手机微信聊天界面_html5教程技巧 下一篇:使用HTML5 Canvas API中的clip()方法裁剪区域图像_html5教程技巧
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    最新问题
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板