水车_ ·文本垂直对齐方式
1. 前言
我们前面讲的 canvas 只能绘制单行文本，单行文本怎么会有垂直对齐呢？其实，这里的垂直对齐是指文本基线与单行文本的对齐，类似 CSS 中的 vertical-align概念，本小节我们就来学习一下文本的垂直对齐。
2. 垂直对齐
canvas 为我们提供了一个文字基线与文本的垂直关系设置的属性 textBaseline，这里的基线设置和 CSS 的 vertical-align 概念很类似，也可以想象成我们学习拼音时使用的四线三格图。在电脑和手机上，每个汉字或者字符在设计的时候都有自己的排版方式。
例如这样：
在 canvas 中，使用了六线五格的设定，所有的文字都被限制在了“六线五格”里面，这里字母 f 除外，f 在 canvas 绘制文本中属于一个例外。
我们把这六条线从上到下命名为：
top
hanging
middle
alphabetic
ideographic
bottom
明白了上面的，我们就来看 canvas 是怎么设置基线的。
实例演示
预览
复制
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>慕课网Wiki</title>
<style>
#imooc{
border:1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="imooc">您的浏览器不支持 HTML5 canvas 标签</canvas>
<script>
const canvas = document.getElementById('imooc');
canvas.width=400;
canvas.height=240;
const ctx = canvas.getContext('2d');
ctx.fillStyle="#456795";
ctx.font="20px 微软雅黑";
ctx.beginPath()
ctx.strokeStyle="#ccc";
ctx.moveTo(20,20);
ctx.lineTo(380,20);
ctx.stroke();
ctx.textBaseline="top" //设置基线在文本顶部，文本和基线重合
ctx.fillText("慕课Wiki textBaseline = top", 20,20)
ctx.beginPath()
ctx.strokeStyle="#ccc";
ctx.moveTo(20,60);
ctx.lineTo(380,60);
ctx.stroke();
ctx.textBaseline="hanging" //设置文本悬挂在基线上，文本和基线没有重合
ctx.fillText("慕课Wiki textBaseline = hanging", 20,60)
ctx.beginPath()
ctx.strokeStyle="#ccc";
ctx.moveTo(20,100);
ctx.lineTo(380,100);
ctx.stroke();
ctx.textBaseline="middle" //设置基线在文本中间
ctx.fillText("慕课Wiki textBaseline = middle", 20,100)
ctx.beginPath()
ctx.strokeStyle="#ccc";
ctx.moveTo(20,140);
ctx.lineTo(380,140);
ctx.stroke();
ctx.textBaseline="alphabetic" //标准的字母基线
ctx.fillText("慕课Wiki textBaseline = alphabetic", 20,140)
ctx.beginPath()
ctx.strokeStyle="#ccc";
ctx.moveTo(20,180);
ctx.lineTo(380,180);
ctx.stroke();
ctx.textBaseline="ideographic"
ctx.fillText("慕课Wiki textBaseline = ideographic", 20,180)
ctx.beginPath()
ctx.strokeStyle="#ccc";
ctx.moveTo(20,220);
ctx.lineTo(380,220);
ctx.stroke();
ctx.textBaseline="bottom"
ctx.fillText("慕课Wiki textBaseline = bottom", 20,220)
</script>
<body>
</html>
运行案例 点击 "运行案例" 可查看在线运行效果
运行结果：
这样我们就绘制了一个文本的垂直对齐。
3. 属性整理
本小节我们学习了 textBaseline 属性 , 它们是 canvas 2D API 提供的设置文本基线和文本垂直对其方式的属性。
3.1 对齐设置 textBaseline
textBaseline 说明
- textBaseline 是 canvas 2D API 提供的设置文本基线和文本垂直对其方式的属性。
- 默认值: bottom。
语法：
ctx.textBaseline = value;
取值说明：
| value | 说明 | 特别说明 |
|---|---|---|
| top | 文本基线在文本块的顶部。 | |
| hanging | 文本基线是悬挂基线。 | |
| middle | 文本基线在文本块的中间。 | |
| alphabetic | 文本基线是标准的字母基线。 | |
| ideographic | 文字基线是表意字基线。 | 如果字符本身超出了 alphabetic 基线，那么 ideograhpic 基线位置在字符本身的底部。 |
| bottom | 文本基线在文本块的底部。 | 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。 |
4. 总结
本小节我们主要学习了利用 textBaseline 设定文本垂直对齐方式。
2024 imooc.com All Rights Reserved |