← Canvas 字体 font Canvas 文字绘制方向 direction →

Canvas 文本垂直对齐 textBaseline

不知道大家有没有注意到一个问题，前面两章节我们绘制文本的时候，都不是从原点 (0,0) 开始绘制的

这其实是我故意这么设置的，因为不这么设置，就会有问题

比如下面这个范例，从原点 (0,0) 开始绘制 48px Microsoft YaHei 的文本

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="500" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.font = "48px Microsoft YaHei"
ctx.fillText("简单教程，简单编程",0,0);
ctx.fillText("简单教程，简单编程",0,50);
ctx.moveTo(0,50);
ctx.lineTo(500,50);
ctx.strokeStyle="red";
ctx.stroke();
</script>

运行结果如下

大声说出来，你们看到了什么？

第一行字怎么消失了，咦，不对，第一行字和第二行字怎么上移了这么多？

比如第二行我们是从 (0,50) 开始绘制的，结果文本都跑到基线上面去了

这就涉及到一个问题，就是绘制文本时的基线对齐选项

四线三格图

回想下大家开始学英文的时候，是不是对下面这张 四线三格 很熟悉

那时候练习英文字母的时候可是要对号入住哦，稍微差那么一点点，就被罚站了

当然了，知道了每个字母是怎么写的之后就好非常多了，比如

我们为什么提这个呢？

因为呀，Canvas 上绘制文本也有这么一张四线三格图，只不过它的名字叫 八线七格图

八线七格图

我们先来看看一张文本基线对齐的图，八线七格图

每个文字在绘制的时候都是有规律的

六线五格图

如果不看 f ( 因为 f 比较特殊 ) 所有的文字都被限制在 六线五格 里面

我们把这六条线从上到下命名为

top
hanging
middle
alphabetic
ideographic
bottom

六线五格图几乎是所有绘图绘制文本的基线图，Canvas 也不例外

六线五格图用于指定一个文本和绘制点之间的关系

绘制点与基线的关系

绘制点指定了基线的起始点位置，比如设置了基线为 alphabetic 那么调用 fillText(0,0,"Hello") 就是说基线 alphabetic 的起始位置就是 (0,0)

这就很好的解释了为什么文章开始的第一行文本顶部不见了的原因

注意

六线五格仍然是存在的，一个文字在某个字体下怎么绘制，在设计这个字体的时候就规定好了

绘制点与基线只是表示六线五格与屏幕坐标之间的关系，是上移了还是下移了而已

Canvas textBaseline 属性

ctx.textBaseline 用于设置绘制文本时，当前文本基线的属性，也就是决定文字垂直方向的对齐方式

默认的值是 alphabetic 也就是从上往下数第四根线

语法

ctx.textBaseline = "top";
ctx.textBaseline = "hanging";
ctx.textBaseline = "middle";
ctx.textBaseline = "alphabetic";
ctx.textBaseline = "ideographic";
ctx.textBaseline = "bottom";

值	说明
top	文本基线在文本块的顶部。
hanging	文本基线是悬挂基线。
middle	文本基线在文本块的中间。
alphabetic	文本基线是标准的字母基线。
ideographic	文字基线是表意字基线。如果字符本身超出了 alphabetic 基线，那么ideograhpic 基线位置在字符本身的底部
bottom	文本基线在文本块的底部。与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母

范例

我们把基线设置为 top，然后看看文本的绘制效果

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-2" width="500" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-2");
var ctx = c.getContext("2d");
ctx.font = "48px Microsoft YaHei"
ctx.textBaseline = "top";
ctx.fillText("简单教程，简单编程",0,0);
</script>

运行结果如下

这下字就就能完全显示出来了

范例 2

我们看看不同的基线位置对绘制文本的影响，红色的线条为绘制点与基线的位置

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-3" width="500" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-3");
var ctx = c.getContext("2d");
var textbase = ['top','hanging','middle','alphabetic','ideographic','bottom']

ctx.strokeStyle = "red"
ctx.moveTo(0,80)
ctx.lineTo(500,80)
ctx.stroke();
ctx.font = "48px Microsoft YaHei"
ctx.fillStyle="black";

for ( var i = 0; i <= textbase.length;i++)
{
    ctx.textBaseline = textbase[i];
    ctx.fillText("简",10+60*i,80);
}
</script>

运行结果如下

从范例中可以看出，在某些字体下，某些基准线对字体的绘制位置是没有影响的

为什么会这样呢？

这主要是设计该字体的时候的问题，如果继续研究，内容就多了，我们就不继续了

← Canvas 字体 font Canvas 文字绘制方向 direction →

Canvas 文本垂直对齐 textBaseline

四线三格图

八线七格图

六线五格图

绘制点与基线的关系

注意

Canvas textBaseline 属性

语法

范例

范例 2

Canvas 基础教程