Canvas 自定义扩展方法：文字自动换行

Canvas API 提供了强大的绘图功能，但默认并不支持自动换行。为了满足现代 Web 应用的需求，特别是在有限的空间内展示多行文本，本文将介绍如何为 Canvas 上下文扩展自定义方法来实现文字自动换行功能。我们将从基本概念入手，逐步深入到具体实现，并通过多个示例来展示不同的应用场景。

基本概念与作用说明

在 Canvas 中，fillText() 方法用于在画布上绘制文本。然而，该方法不支持自动换行，这意味着如果文本过长，它会超出指定的边界。为了解决这个问题，我们需要自定义一个方法来计算每一行的文本并逐行绘制它们。

示例一：基础使用

function drawTextWithWrap(ctx, text, x, y, maxWidth) {
   
  const words = text.split(' ');
  let line = '';
  for (let n = 0; n < words.length; n++) {
   
    const testLine = line + words[n] + ' ';
    const metrics = ctx.measureText(testLine);
    const testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
   
      ctx.fillText(line, x, y);
      line = words[n] + ' ';
      y += ctx.measureText('M').emHeightAscent + ctx.measureText('M').emHeightDescent + 5;
    } else {
   
      line = testLine;
    }
  }
  ctx.fillText(line, x, y);
}

// 使用示例
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

ctx.font = '16px Arial';
const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
const maxWidth = 200;
const x = 10;
const y = 50;

drawTextWithWrap(ctx, text, x, y, maxWidth);

扩展 Canvas 上下文

为了方便使用，我们可以直接在 CanvasRenderingContext2D 原型上添加一个新方法，这将使得所有 Canvas 上下文都可以直接调用这个方法。

示例二：扩展 Canvas 上下文

CanvasRenderingContext2D.prototype.drawTextWrapped = function (text, x, y, maxWidth) {
   
  const words = text.split(' ');
  let line = '';
  for (let n = 0; n < words.length; n++) {
   
    const testLine = line + words[n]