编程 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 给背景设置渐变色的方法

Sep 12 HTML / CSS

深入剖析webstorage[html5的本地数据处理]

Jul 11 HTML / CSS

html5 标签

Jul 16 HTML / CSS

HTML5 预加载让页面得以快速呈现

Aug 13 HTML / CSS

html5教程实现Photoshop渐变色效果

Dec 04 HTML / CSS

html5使用canvas实现跟随光标跳动的火焰效果

Jan 07 HTML / CSS

一个不错的HTML5 Canvas多层点击事件监听实例

Apr 29 HTML / CSS

HTML5 DeviceOrientation实现手机网站摇一摇功能代码实例

Apr 24 HTML / CSS

基于Html5实现的语音搜索功能

May 13 HTML / CSS

如何使用amaze ui的分页样式封装一个通用的JS分页控件

Aug 21 HTML / CSS

HTML5输入框下拉菜单功能的示例代码

Sep 08 HTML / CSS

使用CSS连接数据库的方式

Feb 28 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

PHP内核探索：变量存储与类型使用说明

2014/01/30 PHP

php猴子选大王问题解决方法

2015/05/12 PHP

yii去掉必填项中星号的方法

2015/12/28 PHP

PHP框架Laravel插件Pagination实现自定义分页

2020/04/22 PHP

搜索附近的人PHP实现代码

2018/02/11 PHP

Laravel 中使用简单的方法跟踪用户是否在线(推荐)

2019/10/30 PHP

判断页面是关闭还是刷新的js代码

2007/01/28 Javascript

Flash对联广告的关闭按钮讨论

2007/01/30 Javascript

菜鸟javascript基础整理1

2010/12/06 Javascript

js异步加载的三种解决方案

2013/03/04 Javascript

如何通过javascript操作web控件的自定义属性

2013/11/25 Javascript

针对初学者的jQuery入门指南

2015/08/15 Javascript

基于Jquery代码实现手风琴菜单

2015/11/19 Javascript

一不小心就做错的JS闭包面试题

2015/11/25 Javascript

JS前端加密算法示例

2016/12/22 Javascript

vue+axios新手实践实现登陆的示例代码

2018/06/06 Javascript

JSX在render函数中的应用详解

2019/09/04 Javascript

使用Node.js在深度学习中做图片预处理的方法

2019/09/18 Javascript

JS中循环遍历数组的四种方式总结

2021/01/23 Javascript

Python列表推导式、字典推导式与集合推导式用法实例分析

2018/02/07 Python

python创造虚拟环境方法总结

2019/03/04 Python

Python完成毫秒级抢淘宝大单功能

2019/06/06 Python

Python中低维数组填充高维数组的实现

2019/12/02 Python

python深copy和浅copy区别对比解析

2019/12/26 Python

pygame实现飞机大战

2020/03/11 Python

定制iPhone和Macbook保护壳：Slick Case

2018/11/21 全球购物

用Python写一个for循环的例子

2016/07/19 面试题

施工人员岗位职责

2013/12/12 职场文书

联欢晚会主持词

2014/03/25 职场文书

企业理念标语

2014/06/09 职场文书

党的群众路线教育实践活动学习笔记范文

2014/11/06 职场文书

党员自我评价范文2015

2015/03/03 职场文书

2015年酒店年度工作总结

2015/05/23 职场文书

结婚喜宴迎宾词

2015/08/10 职场文书

少先大队干部竞选稿

2015/11/20 职场文书

win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法

2022/07/07 数码科技