水平对齐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”> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ 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); };
运行结果：
垂直对齐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”> 你的浏览器居然不支持Canvas？！赶快换一个吧！！ 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); };
运行结果：
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3127735.html
