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

浅析CSS3中鲜为人知的属性：-webkit-tap-highlight-color

Jan 12 HTML / CSS

css3加js做一个简单的3D行星运转效果实例代码

Jan 18 HTML / CSS

css3实现文字扫光渐变动画效果的示例

Nov 07 HTML / CSS

canvas基础之图形验证码的示例

Jan 02 HTML / CSS

巧用HTML5给按钮背景设计不同的动画简单实例

Aug 09 HTML / CSS

详解HTML5中的拖放事件（Drag 和 drop）

Nov 14 HTML / CSS

通过HTML5规范搞定i、em、b、strong元素的区别

Mar 04 HTML / CSS

Html5页面二次分享的实现

Jul 30 HTML / CSS

HTML利用九宫格原理进行网页布局

Mar 13 HTML / CSS

使用Html+Css实现简易导航栏功能(导航栏遇到鼠标切换背景颜色)

Apr 07 HTML / CSS

html form表单基础入门案例讲解

Jul 15 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

大师制作的中短波矿石收音机

2020/04/02 无线电

针对初学PHP者的疑难问答(1)

2006/10/09 PHP

php中处理模拟rewrite 效果

2006/12/09 PHP

PHP的基本常识小结

2013/07/05 PHP

php生成静态html页面的方法(2种方法)

2015/09/14 PHP

PHP迭代器和迭代的实现与使用方法分析

2018/04/19 PHP

js处理自己不能定义二维数组的方法详解

2014/03/03 Javascript

jQuery对象的length属性用法实例

2014/12/27 Javascript

js+css实现tab菜单切换效果的方法

2015/01/20 Javascript

jQuery弹出框代码封装DialogHelper

2015/01/30 Javascript

浅析javascript中函数声明和函数表达式的区别

2015/02/15 Javascript

jQuery插件multiScroll实现全屏鼠标滚动切换页面特效

2015/04/12 Javascript

javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法

2015/05/14 Javascript

jQuery中$(function() {});问题详解

2015/08/10 Javascript

jQuery实现带分组数据的Table表头排序实例分析

2015/11/24 Javascript

基于JavaScript实现表单密码的隐藏和显示出来

2016/03/02 Javascript

非常优秀的JS图片轮播插件Swiper的用法

2017/01/03 Javascript

Canvas实现放射线动画效果

2017/02/15 Javascript

express+mockjs实现模拟后台数据发送功能

2018/01/07 Javascript

jQuery插件实现非常实用的tab栏切换功能【案例】

2019/02/18 jQuery

Vue实现固定定位图标滑动隐藏效果

2019/05/30 Javascript

vue-iview动态新增和删除的方法

2020/06/17 Javascript

python正则匹配查询港澳通行证办理进度示例分享

2013/12/27 Python

Python Web框架Flask中使用七牛云存储实例

2015/02/08 Python

python在linux系统下获取系统内存使用情况的方法

2015/05/11 Python

python安装Scrapy图文教程

2017/08/14 Python

Pycharm远程调试原理及具体配置详解

2019/08/08 Python

如何使用python切换hosts文件

2020/04/29 Python

Python闭包及装饰器运行原理解析

2020/06/17 Python

基于PyTorch的permute和reshape/view的区别介绍

2020/06/18 Python

增大python字体的方法步骤

2020/07/05 Python

团队精神演讲稿

2013/12/31 职场文书

PHP 技巧 * SVG 保存为图片（分享图生成）

2021/04/02 PHP

Python实现排序方法常见的四种

2021/07/15 Python

Win11怎么进入安全模式？Windows 11进入安全模式的方法

2021/11/21 数码科技

Java 超详细讲解hashCode方法

2022/04/07 Java/Android