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实现文本对齐的方法总结

HTML / CSS 相关文章推荐
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
CSS3 实现弹跳的小球动画
Oct 26 HTML / CSS
HTML5移动端开发遇见的东西
Oct 11 HTML / CSS
通过HTML5 Canvas API绘制弧线和圆形的教程
Mar 14 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
Html5应用程序缓存(Cache manifest)
Jun 04 HTML / CSS
将SVG图引入到HTML页面的实现
Sep 20 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
Sep 08 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
You might like
php代码把全角数字转为半角数字
2007/12/10 PHP
PHP的PDO常用类库实例分析
2016/04/07 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
js 日期比较相关天数代码
2014/04/02 Javascript
20个实用的JavaScript技巧分享
2014/11/28 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
javascript实现图片左右滚动效果【可自动滚动,有左右按钮】
2016/09/19 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
自制简易打赏功能的实例
2017/09/02 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
2019/07/09 Javascript
这应该是最详细的响应式系统讲解了
2019/07/22 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
js new Date()实例测试
2019/10/31 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
django表单实现下拉框的示例讲解
2018/05/29 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
python清空命令行方式
2020/01/13 Python
python实现拼图小游戏
2020/02/22 Python
python中round函数保留两位小数的方法
2020/12/04 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
澳大利亚领先的在线葡萄酒零售商:Get Wines Direct
2018/03/27 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
商务助理求职信范文
2014/04/20 职场文书
财务人员岗位职责
2015/02/03 职场文书
保研专家推荐信范文
2015/03/25 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书