在Canvas画布上绘制文字时如何实现垂直对齐？

图形开发canvashtml5

运行效果

Canvas提供了textBaseline属性来实现文字的垂直对齐。textBaseline属性值有六个，分别是top、hanging、middle、alphabetic、ideographic、bottom。

注意

运行效果
接下来请仔细观察上图，这张图是六线五格图，这张图中包含了三条红色的线和三条蓝色的线， 这六条线分别与文字垂直对齐的六种方式相对应；中文常用的是top、middle、bottom这三条红线，top表示文本基线在文本块的顶部，这就是我们常说的顶端对齐，middle表示文本基线在文本块的中间，也就是垂直居中对齐；bottom表示文本基线在文本块的底部，这就是我们常说的底端对齐。而英文常用的是hanging、alphabetic、ideographic这三条蓝色 ，例如我们使用四线三格图写英文时，大写的E 、F,小写的f需基于hanging这条文本基线顶端对齐排列。而alphabetic是多数字母排列的基准线，即字母基于alphabetic基线底端对齐排列，但有些字母除外，例如字母f，它是基于ideographic基准线对齐排列。

以下是一个网页示例，展示了如何在Canvas上绘制文字时如何实现垂直对齐：

示例效果与源代码：

运行效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>

<head>
    <title>绘制基本图形(文本垂直对齐)</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="图形系统开发实战:基础篇 示例">
    <meta name="author" content="hjq">
    <meta name="keywords" content="canvas,anygraph,javascript,图形">
</head>

<body style="overflow: hidden; margin:10px;">
    <canvas id="canvas" width="800" height="500" style="border:solid 1px #CCCCCC; box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);" />
</body>
<script>
    // 从页面中获取画板对象
    let canvas = document.getElementById('canvas');
    // 从画板中获取“2D渲染上下文”对象
    let ctx = canvas.getContext('2d');
 
    // 设置字体
    ctx.font = "24px sans-serif";

    // 绘制各种垂直对齐文本
    ctx.textBaseline = "top";
    ctx.fillText("1 文字垂直对齐(top, abcdefghijklmnopqrstuvwxyz)", 60, 50);
    ctx.textBaseline = "hanging";
    ctx.fillText("2 文字垂直对齐(hanging, abcdefghijklmnopqrstuvwxyz)", 60, 130);
    ctx.textBaseline = "middle";
    ctx.fillText("3 文字垂直对齐(middle, abcdefghijklmnopqrstuvwxyz)", 60, 210);
    ctx.textBaseline = "alphabetic";
    ctx.fillText("4 文字垂直对齐(alphabetic, abcdefghijklmnopqrstuvwxyz)", 60, 290);
    ctx.textBaseline = "ideographic";
    ctx.fillText("5 文字垂直对齐(ideographic, abcdefghijklmnopqrstuvwxyz)", 60, 370);
    ctx.textBaseline = "bottom";
    ctx.fillText("6 文字垂直对齐(bottom, abcdefghijklmnopqrstuvwxyz)", 60, 450);


    // 绘制辅助线
    ctx.beginPath();
    ctx.moveTo(0, 50); ctx.lineTo(canvas.width, 50);
    ctx.moveTo(0, 130); ctx.lineTo(canvas.width, 130);
    ctx.moveTo(0, 210); ctx.lineTo(canvas.width, 210);
    ctx.moveTo(0, 290); ctx.lineTo(canvas.width, 290);
    ctx.moveTo(0, 370); ctx.lineTo(canvas.width, 370);
    ctx.moveTo(0, 450); ctx.lineTo(canvas.width, 450);
    ctx.strokeStyle = "green";
    ctx.stroke();

    // 绘制坐标点
    ctx.beginPath();
    ctx.arc(60, 50, 4, 0, 2 * Math.PI);
    ctx.arc(60, 130, 4, 0, 2 * Math.PI);
    ctx.arc(60, 210, 4, 0, 2 * Math.PI);
    ctx.arc(60, 290, 4, 0, 2 * Math.PI);
    ctx.arc(60, 370, 4, 0, 2 * Math.PI);
    ctx.arc(60, 450, 4, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
</script>

</html>

在这个示例中，我们首先定义了一个Canvas元素，并设置了其宽度和高度。然后，通过JavaScript中canvas.getContext()方法获取从画板中获取“2D渲染上下文”对象。
接下来绘制垂直对齐的文本。
使用textBaseline属性即可实现该效果。如将textBaseline设置为top时，表示文本基线在文本块的顶部，这就是我们常说的顶端对齐。当textBaseline设置为“hanging”时，表示文本基线是悬挂基线。当textBaseline设置为“middle”时，表示文本基线在文本块的中间，这就是我们常说的垂直居中对齐。
当textBaseline设置为“alphabetic”时，表示文本基线是标准的字母基线。当textBaseline设置为“ideographic”时，表示文字基线是表意字基线。当textBaseline设置为“bottom”时，表示文文本基线在文本块的底部，这就是我们常说的底端对齐。

上一篇：Canvas API 中用于设置字母间距的属性是什么？

下一篇：JavaScript中字符串可以是对象吗？