画布元素 - 2D 绘图 - 绘制文本内容

在 HTML5 中，<canvas> 元素为我们提供了强大的 2D 绘图能力，其中绘制文本内容是一个很常用的功能。通过 <canvas>，我们可以在网页上动态地创建和操作文本，实现丰富多样的视觉效果。本文将详细介绍如何使用 <canvas> 元素进行 2D 绘图时绘制文本内容。

基本原理

<canvas> 元素是 HTML5 新增的一个用于绘制图形的元素，它就像是一个画布，我们可以使用 JavaScript 在这个画布上进行各种绘图操作。要在 <canvas> 上绘制文本，我们需要先获取 <canvas> 元素的上下文（context），然后使用上下文提供的方法来绘制文本。

获取画布上下文

首先，我们需要在 HTML 中创建一个 <canvas> 元素，然后使用 JavaScript 获取它的 2D 上下文。以下是示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Text Drawing</title>
</head>
<body>
    <!-- 创建一个 canvas 元素 -->
    <canvas id="myCanvas" width="400" height="200"></canvas>
    <script>
        // 获取 canvas 元素
        const canvas = document.getElementById('myCanvas');
        // 获取 2D 上下文
        const ctx = canvas.getContext('2d');
    </script>
</body>
</html>

在上述代码中，我们首先在 HTML 中创建了一个 <canvas> 元素，并为其设置了 id、width 和 height 属性。然后在 JavaScript 中，使用 document.getElementById 方法获取该 <canvas> 元素，再使用 getContext('2d') 方法获取其 2D 上下文。

绘制文本的方法

<canvas> 上下文提供了两种主要的方法来绘制文本：fillText() 和 strokeText()。

`fillText()` 方法

fillText() 方法用于在画布上填充文本。其语法如下：

ctx.fillText(text, x, y [, maxWidth]);

text：要绘制的文本内容。
x：文本起始点的 x 坐标。
y：文本起始点的 y 坐标。
maxWidth（可选）：文本的最大宽度，如果指定了该参数，文本会自动缩放以适应这个宽度。

以下是一个使用 fillText() 方法绘制文本的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Fill Text</title>
</head>
<body>
    <canvas id="fillCanvas" width="400" height="200"></canvas>
    <script>
        const fillCanvas = document.getElementById('fillCanvas');
        const fillCtx = fillCanvas.getContext('2d');
        // 设置字体样式
        fillCtx.font = '30px Arial';
        // 设置填充颜色
        fillCtx.fillStyle = 'blue';
        // 绘制填充文本
        fillCtx.fillText('Hello, Canvas!', 50, 100);
    </script>
</body>
</html>

在上述代码中，我们首先设置了字体样式和填充颜色，然后使用 fillText() 方法在画布上绘制了一段蓝色的文本。

`strokeText()` 方法

strokeText() 方法用于在画布上绘制文本的轮廓。其语法与 fillText() 方法相同：

ctx.strokeText(text, x, y [, maxWidth]);

以下是一个使用 strokeText() 方法绘制文本的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Stroke Text</title>
</head>
<body>
    <canvas id="strokeCanvas" width="400" height="200"></canvas>
    <script>
        const strokeCanvas = document.getElementById('strokeCanvas');
        const strokeCtx = strokeCanvas.getContext('2d');
        // 设置字体样式
        strokeCtx.font = '30px Arial';
        // 设置描边颜色
        strokeCtx.strokeStyle = 'red';
        // 设置线宽
        strokeCtx.lineWidth = 2;
        // 绘制描边文本
        strokeCtx.strokeText('Hello, Canvas!', 50, 100);
    </script>
</body>
</html>

在上述代码中，我们设置了字体样式、描边颜色和线宽，然后使用 strokeText() 方法在画布上绘制了一段红色轮廓的文本。

文本样式设置

除了字体和颜色，我们还可以设置其他文本样式，如对齐方式、基线等。

对齐方式

可以使用 textAlign 属性来设置文本的水平对齐方式，其取值可以是 start、end、left、right 或 center。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Text Alignment</title>
</head>
<body>
    <canvas id="alignCanvas" width="400" height="200"></canvas>
    <script>
        const alignCanvas = document.getElementById('alignCanvas');
        const alignCtx = alignCanvas.getContext('2d');
        alignCtx.font = '20px Arial';
        alignCtx.fillStyle = 'black';
        // 左对齐
        alignCtx.textAlign = 'left';
        alignCtx.fillText('Left Aligned', 50, 50);
        // 居中对齐
        alignCtx.textAlign = 'center';
        alignCtx.fillText('Center Aligned', 200, 100);
        // 右对齐
        alignCtx.textAlign = 'right';
        alignCtx.fillText('Right Aligned', 350, 150);
    </script>
</body>
</html>

基线

可以使用 textBaseline 属性来设置文本的垂直对齐方式，其取值可以是 top、hanging、middle、alphabetic、ideographic 或 bottom。以下是一个示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Text Baseline</title>
</head>
<body>
    <canvas id="baselineCanvas" width="400" height="200"></canvas>
    <script>
        const baselineCanvas = document.getElementById('baselineCanvas');
        const baselineCtx = baselineCanvas.getContext('2d');
        baselineCtx.font = '20px Arial';
        baselineCtx.fillStyle = 'black';
        // 顶部基线
        baselineCtx.textBaseline = 'top';
        baselineCtx.fillText('Top Baseline', 50, 50);
        // 中间基线
        baselineCtx.textBaseline = 'middle';
        baselineCtx.fillText('Middle Baseline', 50, 100);
        // 底部基线
        baselineCtx.textBaseline = 'bottom';
        baselineCtx.fillText('Bottom Baseline', 50, 150);
    </script>
</body>
</html>

总结

方法/属性	描述
`fillText(text, x, y [, maxWidth])`	在画布上填充文本
`strokeText(text, x, y [, maxWidth])`	在画布上绘制文本的轮廓
`font`	设置字体样式
`fillStyle`	设置填充颜色
`strokeStyle`	设置描边颜色
`lineWidth`	设置线宽
`textAlign`	设置文本的水平对齐方式
`textBaseline`	设置文本的垂直对齐方式

通过以上方法和属性，我们可以在 <canvas> 上灵活地绘制各种样式的文本内容，为网页增添丰富的视觉效果。

画布元素 - 2D 绘图 - 绘制文本内容