在 HTML5 中，我们可以使用 <canvas> 元素来绘制各种图形，包括文本。不过，<canvas> 并没有原生的换行或字距设置功能，但我们可以通过一些方法来实现这些效果。

绘制文本的基本方法

首先，我们需要创建一个 <canvas> 元素，并获取它的上下文：

<canvas id="myCanvas" width="600" height="400"></canvas>

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

然后，我们可以使用上下文的 fillText() 方法来绘制文本：

ctx.font = '24px Arial';
ctx.fillText('Hello, World!', 50, 50);

以上代码将在画布上绘制出一个字号为 24px 的 Arial 字体的 “Hello, World!” 文本。

实现换行

要实现文本的换行，我们可以手动分割文本，并分别绘制每一行。下面是一个简单的例子：

const text = 'This is a long text that needs to be wrapped.';
const maxWidth = 200; // 最大宽度

let words = text.split(' '); // 将文本拆分成单词
let line = ''; // 初始化行
let lines = []; // 所有行

for (let i = 0; i < words.length; i++) {
  let testLine = line + words[i] + ' '; // 测试行

  if (ctx.measureText(testLine).width > maxWidth) {
    lines.push(line); // 超出宽度，将行推入数组
    line = words[i] + ' '; // 新建行
  } else {
    line = testLine; // 保持在目标行
  }
}

lines.push(line); // 将剩余的行推入数组

for (let i = 0; i < lines.length; i++) {
  ctx.fillText(lines[i], 50, 50 + (i * 30)); // 绘制每一行
}

这段代码将在画布上绘制出一个宽度为 200px 的文本，超出宽度的部分将自动换行。

设置字距

要设置文本的字距，我们可以使用 letterSpacing 属性。下面是一个例子：

ctx.font = '24px Arial';
ctx.letterSpacing = 3;
ctx.fillText('Hello, World!', 50, 50);

以上代码将在画布上绘制出一个字号为 24px 的 Arial 字体的 “Hello, World!” 文本，字距为 3px。

总结

通过手动分割文本并绘制每一行的方法，我们可以实现 <canvas> 中的文本换行效果。对于字距设置，可以使用 letterSpacing 属性来调整。

希望这篇博文能帮助你更好地绘制文本内容，并实现一些高级排版效果。

如果你对于以上内容有任何疑问或建议，欢迎在评论中留言。谢谢阅读！

本文来自极简博客，作者：冰山一角，转载请注明原文链接：Canvas 绘制文本实现换行，设置字距