Canvas基础篇：文本操作方法详解

最新推荐文章于 2025-05-16 18:05:00 发布

wuhen_n

最新推荐文章于 2025-05-16 18:05:00 发布

阅读量559

点赞数 22

分类专栏： canvas教程：基础+动画文章标签：前端 javascript canvas 文本绘制

本文链接：https://blog.csdn.net/wuhen_n/article/details/147895367

版权

canvas教程：基础+动画专栏收录该内容

21 篇文章

订阅专栏

Canvas基础篇：文本操作方法详解

前言
文本操作方法
结语

前言

在之前的文章中，我们讲述了如何通过Canvas绘制图形，并设置图形的样式和颜色。本文将讲述如何通过绘制文本，及文本绘制方法。

文本操作方法

和图形绘制一样，Canvas也提供了两种方式绘制文本：填充文本fillText()和边框文本strokeText()。除此之外，还有一个用于获取文本对象的方法measureText()。

fillText()

fillText() 通过填充的方式绘制一个实心文本，其语法如下所示：

语法说明

fillText(text, x, y [, maxWidth])

其中text 表示要绘制的文本内容，(x, y) 表示文本的起始坐标点，maxWidth为可选值，表示文本的最大宽度，若文本超过这个值会自动压缩，我们来看一段简单的代码：

代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fillText示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="200"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 设置字体样式
      ctx.font = '30px Arial';
      ctx.fillStyle = 'blue';
      // 绘制填充文本 正常展示
      ctx.fillText('填充文本', 50, 50);
      // 绘制填充文本 压缩展示
      ctx.fillText('填充文本', 50, 100, 50);
    </script>
  </body>
</html>

效果预览

fillText示例

strokeText()

strokeText() 通过绘制文本边框的方式绘制一个空心文本，其语法如下所示：

语法说明

strokeText(text, x, y [, maxWidth])

其中text 表示要绘制的文本内容，(x, y) 表示文本的起始坐标点，maxWidth为可选值，表示文本的最大宽度，若文本超过这个值会自动压缩。

代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>strokeText示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="200"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 设置字体样式
      ctx.font = '30px Arial';
      ctx.strokeStyle = 'blue';
      // 绘制边框文本 正常展示
      ctx.strokeText('边框文本', 50, 50);
      // 绘制边框文本 压缩展示
      ctx.strokeText('边框文本', 50, 100, 50);

      ctx.stroke();
    </script>
  </body>
</html>

效果预览

strokeText示例

measureText()

measureText()会返回一个TextMetrics对象，该对象包括：width（文本的宽度）、actualBoundingBoxLeft（文本左边界到起始点的距离）、actualBoundingBoxRight（文本右边界到起始点的距离）等属性。其中，最常用的就是width属性，通过该属性我们可以很方便地实现文字的水平居中效果。

代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>measureText示例</title>
  </head>
  <body>
    <canvas id="canvas" width="400" height="200"></canvas>
    <script>
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');

      // 矩形参数
      const rectX = 50;
      const rectY = 50;
      const rectWidth = 300;
      const rectHeight = 100;

      // 绘制描边矩形
      ctx.strokeStyle = '#333';
      ctx.lineWidth = 2;
      ctx.strokeRect(rectX, rectY, rectWidth, rectHeight);

      // 设置文本样式
      ctx.font = '30px Arial';
      ctx.fillStyle = 'blue';
      const text = '水平居中的文本';

      // 使用measureText获取文本宽度
      const textMetrics = ctx.measureText(text);
      const textWidth = textMetrics.width;

      // 计算文本水平居中位置
      const textX = rectX + (rectWidth - textWidth) / 2;
      const textY = rectY + rectHeight / 2 ;

      // 绘制文本
      ctx.fillText(text, textX, textY);
    </script>
  </body>
</html>