社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > H5教程 > HTML5 Canvas实现文本对齐的方法总结_html5教程技巧

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

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

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

    相关标签：
    canvas html5 文本
    来源：php.cn
    上一篇：HTML5仿手机微信聊天界面_html5教程技巧 下一篇：使用HTML5 Canvas API中的clip()方法裁剪区域图像_html5教程技巧
    本站声明
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    作者最新文章
    最新问题
    如何让我的图像显示在页面的主显示屏上？ 我想做的是使用NASAAPI接收一些照片。然后在我的网页的缩略图和主显示屏上显示这些照片。我只是弄清楚为什么代码不从缩略图中获取图像并将其显示在页面上。我还使用HTML5及以上版本...
    来自于 2024-04-06 15:33:12
    0
    1
    433
    PDF文件能够运行HTML5和Javascript吗？ 我有一个愚蠢的想法，想尝试制作一个在任何计算机上都不会被阻止的程序，因为它将嵌入在PDF中（我听说Javascript可以在PDF中运行）。它将在PDF文件中运行HTML5和Jav...
    来自于 2024-04-05 12:57:00
    0
    1
    456
    HTML5中的enctype和formenctype有什么区别？ 我只是想知道HTMLLivingStandard（又名新的HTML5规范）中的属性enctype和formenctype之间有什么区别？我一直在阅读《面向开发人员的HTML标准》，...
    来自于 2024-04-02 11:47:56
    0
    1
    275
    使页面适合移动设备吗？ 我有很多网页和一些网站。问题是，我是一个初学者。我使用基本的html5和css3，但我不知道如何使它们放大、缩小并且适合移动设备。例如，这是我的页面之一和我的网站之一，您可以在其中...
    来自于 2024-04-01 20:42:38
    0
    1
    259
    相关专题
    更多>
    热门推荐
    热门教程
    更多>
    相关教程
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板