编程 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 27 HTML / CSS

利用CSS3的flexbox实现水平垂直居中与三列等高布局

Sep 12 HTML / CSS

利用css3画个同心圆示例代码

Jul 03 HTML / CSS

CSS3 不定高宽垂直水平居中的几种方式

Mar 26 HTML / CSS

详解CSS3：overflow属性

Nov 17 HTML / CSS

HTML5对手机页面长按会粘贴复制禁用的解决方法

Jul 19 HTML / CSS

基于HTML5的WebSocket的实例代码

Aug 15 HTML / CSS

2014年圣诞节倒计时网页的制作过程

Dec 05 HTML / CSS

10个最常见的HTML5面试题附答案

Jun 06 HTML / CSS

HTML5各种头部meta标签的功能(推荐)

Mar 13 HTML / CSS

canvas中普通动效与粒子动效的实现代码示例

Jan 03 HTML / CSS

在CSS中使用when/else的方法

Jan 18 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中输出转义JavaScript代码的实现代码

2011/04/22 PHP

PHP的异常处理类Exception的使用及说明

2012/06/13 PHP

PHP在不同页面间传递Json数据示例代码

2013/06/08 PHP

php接口技术实例详解

2016/12/07 PHP

js 覆盖和重载函数

2009/09/25 Javascript

IE7中javascript操作CheckBox的checked=true不打勾的解决方法

2009/12/07 Javascript

jQuery中odd选择器的定义和用法

2014/12/23 Javascript

Jquery中基本选择器用法实例详解

2015/05/18 Javascript

JavaScript阻止回车提交表单的方法

2015/12/30 Javascript

理解Angular数据双向绑定

2016/01/10 Javascript

jQuery 3.0 的 setter和getter 模式详解

2016/07/11 Javascript

jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)

2016/08/23 Javascript

JS匿名函数实例分析

2016/11/26 Javascript

Koa2微信公众号开发之本地开发调试环境搭建

2018/05/16 Javascript

解决vue项目input输入框双向绑定数据不实时生效问题

2020/08/05 Javascript

VUE 实现element upload上传图片到阿里云

2020/08/12 Javascript

解决antd datepicker 获取时间默认少8个小时的问题

2020/10/29 Javascript

[01:20]DOTA2 齐天大圣至宝动态展示

2016/12/13 DOTA

[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场

2018/04/04 DOTA

Python 自动补全(vim)

2014/11/30 Python

python使用append合并两个数组的方法

2015/04/28 Python

Python中在脚本中引用其他文件函数的实现方法

2016/06/23 Python

python编写分类决策树的代码

2017/12/21 Python

Python socket实现的简单通信功能示例

2018/08/21 Python

Django 通过JS实现ajax过程详解

2019/07/30 Python

python第三方库学习笔记

2020/02/07 Python

美国老牌主机服务商：iPage

2016/07/22 全球购物

moosejaw旗下的户外商品促销网站：Mountain Steals

2017/02/27 全球购物

德国户外装备、登山运动和攀岩商店：tapir store

2020/02/12 全球购物

META-INF文件夹中的MANIFEST.MF的作用

2016/06/21 面试题

网上开店必备创业计划书

2014/01/26 职场文书

公务员转正考察材料

2014/02/07 职场文书

党委班子剖析材料

2014/08/21 职场文书

2015年护士医德医风自我评价

2015/03/03 职场文书

体育教师教学随笔

2015/08/15 职场文书

CSS实现切角+边框+投影+内容背景色渐变效果

2021/11/01 HTML / CSS