编程 HTML / CSS

HTML5 Canvas实现文本对齐的方法总结

Posted in HTML / CSS onMarch 24, 2016

水平对齐textAlign

JavaScript Code复制内容到剪贴板

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

其中各值及意义如下表。

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

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

JavaScript Code复制内容到剪贴板

<!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>
<div id="canvas-warp">
<canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</div>
<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>

运行结果：
HTML5 Canvas实现文本对齐的方法总结

垂直对齐textBaseline

JavaScript Code复制内容到剪贴板

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

其中各值及意义如下表。

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

首先咱们通过一个图来看一下各个基线代表的位置。
HTML5 Canvas实现文本对齐的方法总结

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

JavaScript Code复制内容到剪贴板

<!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>
<div id="canvas-warp">
<canvas id="canvas">
你的浏览器居然不支持Canvas？！赶快换一个吧！！
</canvas>
</div>
<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 / CSS 相关文章推荐

纯css3(无图片/js)制作的几个社交媒体网站的图标

Mar 21 HTML / CSS

Css3+Js制作漂亮时钟(附源码)

Apr 24 HTML / CSS

使用CSS3在触屏上为按钮实现激活效果

Sep 27 HTML / CSS

CSS图片翻转动画技术详解（IE也实现了）

Apr 03 HTML / CSS

X/HTML5 和 XHTML2

Oct 17 HTML / CSS

HTML5 canvas实现移动端上传头像拖拽裁剪效果

Mar 14 HTML / CSS

HTML5本地数据库基础操作详解

Apr 26 HTML / CSS

使用Html5 Stream开发实时监控系统

Jun 02 HTML / CSS

浅析HTML5页面元素及属性

Jan 20 HTML / CSS

CSS3 制作的彩虹按钮样式

Apr 11 HTML / CSS

教你做个可爱的css滑动导航条

Jun 15 HTML / CSS

使用 CSS 轻松实现一些高频出现的奇形怪状按钮

Dec 06 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

一个简单计数器的源代码

2006/10/09 PHP

隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法

2007/02/22 PHP

php框架Phpbean说明

2008/01/10 PHP

php设置允许大文件上传示例代码

2014/03/10 PHP

php获取网页上所有链接的方法

2015/04/03 PHP

PHP加密解密类实例分析

2015/04/20 PHP

js中判断控件是否存在

2010/08/25 Javascript

js前台判断开始时间是否小于结束时间

2012/02/23 Javascript

js获取select标签的值且兼容IE与firefox

2013/12/30 Javascript

详谈jQuery中的this和$(this)

2014/11/13 Javascript

JavaScript将字符串转换为整数的方法

2015/04/14 Javascript

JS实现动态移动层及拖动浮层关闭的方法

2015/04/30 Javascript

JQuery遍历DOM节点的方法

2015/06/11 Javascript

JavaScript中匿名函数的递归调用

2017/01/22 Javascript

玩转Koa之koa-router原理解析

2018/12/29 Javascript

js实现一个简易计算器

2020/03/30 Javascript

《javascript设计模式》学习笔记四：Javascript面向对象程序设计链式调用实例分析

2020/04/07 Javascript

[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17

2018/08/20 DOTA

python复制与引用用法分析

2015/04/08 Python

python实现web方式logview的方法

2015/08/10 Python

Python操作MySQL数据库的三种方法总结

2018/01/30 Python

Python网络编程之TCP与UDP协议套接字用法示例

2018/02/02 Python

单利模式及python实现方式详解

2018/03/20 Python

python mac下安装虚拟环境的图文教程

2019/04/12 Python

Python3.5装饰器原理及应用实例详解

2019/04/30 Python

python3 dict ndarray 存成json,并保留原数据精度的实例

2019/12/06 Python

python3.8下载及安装步骤详解

2020/01/15 Python

keras 实现轻量级网络ShuffleNet教程

2020/06/19 Python

家得宝加拿大家装网上商店：The Home Depot加拿大

2016/08/27 全球购物

Nanushka官网：匈牙利服装品牌

2019/08/14 全球购物

奥地利领先的在线药房：SHOP APOTHEKE

2019/10/07 全球购物

办公室前台岗位职责范本

2013/12/10 职场文书

员工培训心得体会

2013/12/30 职场文书

小学师德师风整改措施

2014/10/27 职场文书

谁动了我的奶酪读书笔记

2015/06/30 职场文书

Win10 最新稳定版本 21H2开始推送

2022/04/19 数码科技