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

图形开发canvashtml5

运行效果

在word中排版时，我们经常会用到文字水平对齐功能，Canvas也提供了类似的功能，它提供了textAlign属性，可指定文字的水平对齐方式，常见的文字水平对齐方式有靠左对齐、居中对齐以及靠右对齐。如当textAlign = left时表示文本靠左对齐，即在水平方向从给定的x坐标值开始，将文字从左向右延伸排列。如图，文字靠左对齐，注意图中红点为fillText方法的坐标点，水平对齐方式将影响到绘制文字的起始位置x坐标值，本示例中的文字x坐标都设置为400，相当于在同一基线上；
当textAlign = center时表示文本居中对齐，即在水平方向从给定的x坐标值开始，将文字居中向两端排列，如图文字居中对齐；当textAlign = right时表示文本靠右对齐，即是在水平方向从给定的x坐标值开始，将文字从右向左延伸排列，如图文字向右对齐。

以下是一个网页示例，展示了如何在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
64
65
66
67
68
69
70
71
72
73
74
75
<!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="600" height="440" 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 Arial, sans-serif";

    // 绘制各种水平对齐的文本
    ctx.textAlign = "left";
    ctx.fillText("文字的水平对齐(left)", 300, 60);
    ctx.textAlign = "center";
    ctx.fillText("文字的水平对齐(center)", 300, 110);
    ctx.textAlign = "right";
    ctx.fillText("文字的水平对齐(right)", 300, 160);

    ctx.textAlign = "start";
    ctx.fillText("文字的水平对齐(start)", 300, 230);
    ctx.textAlign = "end";
    ctx.fillText("文字的水平对齐(end)", 300, 280);

    ctx.textAlign = "start";
    ctx.fillText("文字的水平对齐(start)", 300, 350);
    ctx.textAlign = "end";
    ctx.fillText("文字的水平对齐(end)", 300, 400);

    // 绘制辅助线
    ctx.beginPath();
    ctx.moveTo(300, 0);
    ctx.lineTo(300, canvas.height);
    ctx.moveTo(0, 180)
    ctx.lineTo(canvas.width, 180);
    ctx.moveTo(0, 300)
    ctx.lineTo(canvas.width, 300);
    ctx.strokeStyle = "green";
    ctx.stroke();

    // 绘制辅助文字
    ctx.font = "16px Arial, sans-serif";
    ctx.textAlign = "left";
    ctx.fillStyle = "red";
    ctx.fillText("红点为坐标(x,y)位置", 5, 20);
    ctx.fillStyle = "blue";

    // 绘制坐标点
    ctx.beginPath();
    ctx.arc(300, 60, 4, 0, 2 * Math.PI);
    ctx.arc(300, 110, 4, 0, 2 * Math.PI);
    ctx.arc(300, 160, 4, 0, 2 * Math.PI);
    ctx.arc(300, 210, 4, 0, 2 * Math.PI);
    ctx.arc(300, 260, 4, 0, 2 * Math.PI);
    ctx.arc(300, 350, 4, 0, 2 * Math.PI);
    ctx.arc(300, 400, 4, 0, 2 * Math.PI);
    ctx.fillStyle = "red";
    ctx.fill();
</script>

</html>

在这个示例中，我们首先定义了一个Canvas元素，并设置了其宽度和高度。然后，通过JavaScript中canvas.getContext()方法获取从画板中获取“2D渲染上下文”对象。
接下来绘制各种水平对齐的文本。首先使用canvas样式类中的font属性，设置字体大小为40px，黑体。然后使用textAlign属性设置文本对齐方式。最后使用fillText()方法绘制填充的文字。

上一篇：JavaScript中怎么创建事件对象？

下一篇：在Canvas画布上如何绘制带阴影的文字？