首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

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

Posted in HTML / CSS onMarch 24, 2016

水平对齐textAlign

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

其中各值及意义如下表。

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

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

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>textAlign</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         // 在位置 400 创建蓝线   
  28.         context.strokeStyle="blue";   
  29.         context.moveTo(400,100);   
  30.         context.lineTo(400,500);   
  31.         context.stroke();   
  32.   
  33.   
  34.         context.fillStyle = "#000";   
  35.         context.font="50px Arial";   
  36.   
  37.         // 显示不同的 textAlign 值   
  38.         context.textAlign="start";   
  39.         context.fillText("textAlign=start", 400, 120);   
  40.         context.textAlign="end";   
  41.         context.fillText("textAlign=end", 400, 200);   
  42.         context.textAlign="left";   
  43.         context.fillText("textAlign=left", 400, 280);   
  44.         context.textAlign="center";   
  45.         context.fillText("textAlign=center", 400, 360);   
  46.         context.textAlign="right";   
  47.         context.fillText("textAlign=right", 400, 480);   
  48.     };   
  49. </script>   
  50. </body>   
  51. </html>  

运行结果：
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. <!DOCTYPE html>   
  2. <html lang="zh">   
  3. <head>   
  4.     <meta charset="UTF-8">   
  5.     <title>textBaseline</title>   
  6.     <style>   
  7.         body { background: url("./images/bg3.jpg") repeat; }  
  8.         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }   
  9.     </style>   
  10. </head>   
  11. <body>   
  12. <div id="canvas-warp">   
  13.     <canvas id="canvas">   
  14.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
  15.     </canvas>   
  16. </div>   
  17.   
  18. <script>   
  19.     window.onload = function(){   
  20.         var canvas = document.getElementById("canvas");   
  21.         canvas.width = 800;   
  22.         canvas.height = 600;   
  23.         var context = canvas.getContext("2d");   
  24.         context.fillStyle = "#FFF";   
  25.         context.fillRect(0,0,800,600);   
  26.   
  27.         //在位置 y=300 绘制蓝色线条   
  28.         context.strokeStyle="blue";   
  29.         context.moveTo(0,300);   
  30.         context.lineTo(800,300);   
  31.         context.stroke();   
  32.   
  33.         context.fillStyle = "#00AAAA";   
  34.         context.font="20px Arial";   
  35.   
  36.         //在 y=300 以不同的 textBaseline 值放置每个单词   
  37.         context.textBaseline="top";   
  38.         context.fillText("Top",150,300);   
  39.         context.textBaseline="bottom";   
  40.         context.fillText("Bottom",250,300);   
  41.         context.textBaseline="middle";   
  42.         context.fillText("Middle",350,300);   
  43.         context.textBaseline="alphabetic";   
  44.         context.fillText("Alphabetic",450,300);   
  45.         context.textBaseline="hanging";   
  46.         context.fillText("Hanging",550,300);   
  47.     };   
  48. </script>   
  49. </body>   
  50. </html>  

运行结果：
HTML5 Canvas实现文本对齐的方法总结

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
css3实现的下拉菜单效果示例
Jan 22 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
通过Canvas及File API缩放并上传图片完整示例
Aug 08 HTML / CSS
解析HTML5的存储功能和web SQL的相关操作方法
Feb 19 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例（附demo）
Dec 14 HTML / CSS
H5混合开发app如何升级的方法
Jan 10 HTML / CSS
iframe跨域的几种常用方法
Nov 11 HTML / CSS
html5自动播放mov格式视频的实例代码
Jan 14 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
使用HTML5 Canvas API中的clip()方法裁剪区域图像
Mar 25 #HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 #HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 #HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 #HTML / CSS
HTML5打开本地app应用的方法
Mar 31 #HTML / CSS
如何在网站上添加谷歌定位信息
Apr 16 #HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 #HTML / CSS
tfx(1) tkFileDialog(1) OpenGL(1) Odoo(1) 面向接口(1) BeautifulSoup4(2) exec(1) OpenAI baselines(1) Flask Web(1) ElementTree(1)
You might like
我的php学习笔记(毕业设计)
2012/02/21 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php如何获取文件的扩展名
2015/10/28 PHP
PHP获取客户端及服务器端IP的封装类
2016/07/21 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
javascript第一课
2007/02/27 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
Node.js事件循环（Event Loop）和线程池详解
2015/01/28 Javascript
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
d3.js 地铁轨道交通项目实战
2019/11/27 Javascript
js实现验证码干扰（静态）
2021/02/22 Javascript
[51:17]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
在Python的web框架中中编写日志列表的教程
2015/04/30 Python
在DigitalOcean的服务器上部署flaskblog应用
2015/12/19 Python
python3中str（字符串）的使用教程
2017/03/23 Python
Python数据操作方法封装类实例
2017/06/23 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
ipad上运行python的方法步骤
2019/10/12 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
django model通过字典更新数据实例
2020/04/01 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
GUESS西班牙官方网上商城：美国服饰品牌
2017/03/15 全球购物
.net面试题
2015/12/22 面试题
毕业自我鉴定
2013/11/05 职场文书
银行个人求职自荐信范文
2013/12/16 职场文书
会走路的树教学反思
2014/02/20 职场文书
2014教师党员个人自我评议
2014/09/20 职场文书
初中政治教学反思
2016/02/23 职场文书
Python 内置函数速查表一览
2021/06/02 Python