最新赞助活动温馨提示：自愿赞助服务器费用，学生和没有工作的整站资源免费下载！
>讨论社区 >HTML5 Canvas实现文本对齐的方法总结_html5教程技巧-H5教程
更多 > 最新话题 /New
11-04 微信登录不了网站
09-13 咋不能充值啊
09-13 摸鱼早报 · 星期五 2024-09-13
09-09 摸鱼早报 · 星期一 2024-09-09
09-06 摸鱼早报 · 星期五2024-09-06
09-05 摸鱼早报 · 星期四 2024-09-05
09-04 摸鱼早报 · 星期三 2024-09-04
09-03 摸鱼早报 · 星期二 2024-09-03
09-02 摸鱼早报 · 星期一 2024-09-02
08-30 摸鱼早报 · 星期五 2024-08-30
更多 > 标签云 /Tag
小程序公众号MysqlHtml5JQueryJavaScriptBootstrap视频教程前端工具微信ThinkphpAjaxCurl表单JSON手机后台插件
更多 > 相关网址 /Relative
08-18 wordpress新手入门到精通视频教程教程
08-18 二当家的“精品源码”由入门到精通教程视频教程
05-29 用wamp环境测试怎么更改jpeg呢？
05-10 购物车如何循环遍历数据库信息并动态计算金额
06-06 现在工作不好找啊
05-20 响应式的网站是怎么做的
08-18 Joomla 2.5 从入门到精通视频教程
10-31 HTML5的表单中关于所有type类型的详细介绍-H5教程
10-31 html5实现文字轮滚的示例代码-H5教程
10-31 HTML5-Geolocation APIs的示例代码-H5教程
10-30 HTML5/CSS3专题 canvas 模拟实现电子彩票刮刮乐示例代码（图）-H5教程
10-31 html5实现各种图片样式实例用法汇总-H5教程
10-31 分享用canvas实现水流和水池动画的代码-H5教程
10-30 HTML5第一人称射击游戏实现的代码分享-H5教程
10-30 处理HTML5新标签的浏览器兼容版问题-H5教程
10-30 hwSlider-内容滑动切换效果（一） -H5教程
10-31 h5canvas实现黑客帝国矩形阵效果代码-H5教程
10-31 phonegap进行提示操作的具体示例代码分享-H5教程
10-31 xhtml和html有什么区别？-H5教程
10-30 详细介绍html5小游戏制作思路的代码实例-H5教程
头像

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

来源：http://erdangjiade.com/topic/134038.html H5程序员 2017-10-22 21:49浏览(87)

水平对齐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. <p id="canvas-warp">
  13. <canvas id="canvas">
  14. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
  15. </canvas>
  16. </p>
  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);
  27. // 在位置 400 创建蓝线
  28. context.strokeStyle="blue";
  29. context.moveTo(400,100);
  30. context.lineTo(400,500);
  31. context.stroke();
  34. context.fillStyle = "#000";
  35. context.font="50px Arial";
  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>

运行结果：
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. <!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. <p id="canvas-warp">
  13. <canvas id="canvas">
  14. 你的浏览器居然不支持Canvas？！赶快换一个吧！！
  15. </canvas>
  16. </p>
  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);
  27. //在位置 y=300 绘制蓝色线条
  28. context.strokeStyle="blue";
  29. context.moveTo(0,300);
  30. context.lineTo(800,300);
  31. context.stroke();
  33. context.fillStyle = "#00AAAA";
  34. context.font="20px Arial";
  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>

运行结果：
2016324114419550.jpg (850×500)

标签： 公众号Html5Bootstrap
HTML5仿手机微信聊天界面_html5教程技巧-H5教程
使用HTML5 Canvas API中的clip()方法裁剪区域图像_html5教程技巧-H5教程
评论（0）
头像

友情提示：垃圾评论一律封号 加我微信：826096331拉你进VIP群学习群

1 2