• 主页

  • 投资

  • IT

    🔥

  • 设计

  • 销售

  • 人

  • 共240篇

    前端 - HTML5

关闭

返回栏目

关闭

返回前端 - HTML5栏目

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

作者：

贺及楼

成为作者

更新日期：2025-02-27 12:20:57

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

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

基本原理

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

获取画布上下文

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Text Drawing</title>
  8. </head>
  10. <body>
  11.     <!-- 创建一个 canvas 元素 -->
  12.     <canvas id="myCanvas" width="400" height="200"></canvas>
  13.     <script>
  14.         // 获取 canvas 元素
  15.         const canvas = document.getElementById('myCanvas');
  16.         // 获取 2D 上下文
  17.         const ctx = canvas.getContext('2d');
  18.     </script>
  19. </body>
  21. </html>

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

绘制文本的方法

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

fillText() 方法

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Fill Text</title>
  8. </head>
  10. <body>
  11.     <canvas id="fillCanvas" width="400" height="200"></canvas>
  12.     <script>
  13.         const fillCanvas = document.getElementById('fillCanvas');
  14.         const fillCtx = fillCanvas.getContext('2d');
  16.         // 设置字体样式
  17.         fillCtx.font = '30px Arial';
  18.         // 设置填充颜色
  19.         fillCtx.fillStyle = 'blue';
  20.         // 绘制填充文本
  21.         fillCtx.fillText('Hello, Canvas!', 50, 100);
  22.     </script>
  23. </body>
  25. </html>

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

strokeText() 方法

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

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Stroke Text</title>
  8. </head>
  10. <body>
  11.     <canvas id="strokeCanvas" width="400" height="200"></canvas>
  12.     <script>
  13.         const strokeCanvas = document.getElementById('strokeCanvas');
  14.         const strokeCtx = strokeCanvas.getContext('2d');
  16.         // 设置字体样式
  17.         strokeCtx.font = '30px Arial';
  18.         // 设置描边颜色
  19.         strokeCtx.strokeStyle = 'red';
  20.         // 设置线宽
  21.         strokeCtx.lineWidth = 2;
  22.         // 绘制描边文本
  23.         strokeCtx.strokeText('Hello, Canvas!', 50, 100);
  24.     </script>
  25. </body>
  27. </html>

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

文本样式设置

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

对齐方式

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Text Alignment</title>
  8. </head>
  10. <body>
  11.     <canvas id="alignCanvas" width="400" height="200"></canvas>
  12.     <script>
  13.         const alignCanvas = document.getElementById('alignCanvas');
  14.         const alignCtx = alignCanvas.getContext('2d');
  16.         alignCtx.font = '20px Arial';
  17.         alignCtx.fillStyle = 'black';
  19.         // 左对齐
  20.         alignCtx.textAlign = 'left';
  21.         alignCtx.fillText('Left Aligned', 50, 50);
  23.         // 居中对齐
  24.         alignCtx.textAlign = 'center';
  25.         alignCtx.fillText('Center Aligned', 200, 100);
  27.         // 右对齐
  28.         alignCtx.textAlign = 'right';
  29.         alignCtx.fillText('Right Aligned', 350, 150);
  30.     </script>
  31. </body>
  33. </html>

基线

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Canvas Text Baseline</title>
  8. </head>
  10. <body>
  11.     <canvas id="baselineCanvas" width="400" height="200"></canvas>
  12.     <script>
  13.         const baselineCanvas = document.getElementById('baselineCanvas');
  14.         const baselineCtx = baselineCanvas.getContext('2d');
  16.         baselineCtx.font = '20px Arial';
  17.         baselineCtx.fillStyle = 'black';
  19.         // 顶部基线
  20.         baselineCtx.textBaseline = 'top';
  21.         baselineCtx.fillText('Top Baseline', 50, 50);
  23.         // 中间基线
  24.         baselineCtx.textBaseline = 'middle';
  25.         baselineCtx.fillText('Middle Baseline', 50, 100);
  27.         // 底部基线
  28.         baselineCtx.textBaseline = 'bottom';
  29.         baselineCtx.fillText('Bottom Baseline', 50, 150);
  30.     </script>
  31. </body>
  33. </html>

总结

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

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