HTML5 Canvas实现文本对齐的代码总结

百变鹏仔 2个月前 (10-18) #H5教程

文章标签文本

这篇文章主要介绍了html5 canvas实现文本对齐的方法总结,包括使用水平对齐的context.textalign与垂直对齐的context.textbaseline两种方式及各种参数,需要的朋友可以参考下

水平对齐textAlign

context.textAlign="center|end|left|right|start";

其中各值及意义如下表。

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

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

<!DOCTYPE html>   <html lang="zh">   <head>       <meta charset="UTF-8">       <title>textAlign</title>       <style>           body { background: url("./images/bg3.jpg") repeat; }         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }       </style>   </head>   <body>   <p id="canvas-warp">       <canvas id="canvas">           你的浏览器居然不支持Canvas？！赶快换一个吧！！       </canvas>   </p>     <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);       };   </script>   </body>   </html>

立即学习“前端免费学习笔记（深入）”；

运行结果：

垂直对齐textBaseline

context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";

其中各值及意义如下表。

值	描述
alphabetic	默认。文本基线是普通的字母基线。
top	文本基线是em方框的顶端。
hanging	文本基线是悬挂基线。
middle	文本基线是em方框的正中。
ideographic	文本基线是表意基线。
bottom	文本基线是em方框的底端。

首先咱们通过一个图来看一下各个基线代表的位置。

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

<!DOCTYPE html>   <html lang="zh">   <head>       <meta charset="UTF-8">       <title>textBaseline</title>       <style>           body { background: url("./images/bg3.jpg") repeat; }         #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }       </style>   </head>   <body>   <p id="canvas-warp">       <canvas id="canvas">           你的浏览器居然不支持Canvas？！赶快换一个吧！！       </canvas>   </p>     <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);       };   </script>   </body>   </html>

立即学习“前端免费学习笔记（深入）”；

运行结果：

文章推荐

HTML5 Canvas实现文本对齐的代码总结

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集