HTML5 Canvas实现文本对齐的方法总结_html5教程技巧
水平对齐textAlign
JavaScript Code复制内容到剪贴板
-
context.textAlign="center|end|left|right|start";
其中各值及意义如下表。
值 |
描述 |
start |
默认。文本在指定的位置开始。 |
end |
文本在指定的位置结束。 |
center |
文本的中心被放置在指定的位置。 |
left |
文本左对齐, |
right |
文本右对齐。 |
我们通过一个例子来直观的感受一下。
JavaScript Code复制内容到剪贴板
-
nbsp;html>
- "zh">
-
-
"UTF-8">
-
textAlign
-
-
body { background: url("./images/bg3.jpg") repeat; }
-
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
-
-
-
-
"canvas-warp">
-
-
你的浏览器居然不支持Canvas?!赶快换一个吧!!
-
-
-
<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);
-
-
-
context.strokeStyle="blue";
-
context.moveTo(400,100);
-
context.lineTo(400,500);
-
context.stroke();
-
-
-
context.fillStyle = "#000";
-
context.font="50px Arial";
-
-
-
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);
-
};
-
-
-
运行结果:
垂直对齐textBaseline
JavaScript Code复制内容到剪贴板
-
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
其中各值及意义如下表。
值 |
描述 |
alphabetic |
默认。文本基线是普通的字母基线。 |
top |
文本基线是em方框的顶端。 |
hanging |
文本基线是悬挂基线。 |
middle |
文本基线是em方框的正中。 |
ideographic |
文本基线是表意基线。 |
bottom |
文本基线是em方框的底端。 |
首先咱们通过一个图来看一下各个基线代表的位置。
我们通过一个例子来直观的感受一下。
JavaScript Code复制内容到剪贴板
-
nbsp;html>
- "zh">
-
-
"UTF-8">
-
textBaseline
-
-
body { background: url("./images/bg3.jpg") repeat; }
-
#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }
-
-
-
-
"canvas-warp">
-
-
你的浏览器居然不支持Canvas?!赶快换一个吧!!
-
-
-
<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);
-
-
-
context.strokeStyle="blue";
-
context.moveTo(0,300);
-
context.lineTo(800,300);
-
context.stroke();
-
-
context.fillStyle = "#00AAAA";
-
context.font="20px Arial";
-
-
-
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);
-
};
-
-
-
运行结果:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
-
2024-10-22 09:46:29
-
2024-10-13 13:53:41
-
2024-10-12 12:15:51
-
2024-10-11 22:47:31
-
2024-10-11 19:36:51
-
2024-10-11 15:50:41
-
2024-10-11 15:07:41
-
2024-10-11 14:21:21
-
2024-10-11 12:59:11
-
2024-10-11 12:17:31