canvas 如何自动去换行

在HTML canvas上绘制文本时，如果文本超出了canvas的宽度，它不会自动换行。要实现自动换行，你需要手动计算文本的长度并在适当的位置进行换行。

以下是一个简单的JavaScript函数，它使用canvas的measureText方法来计算文本的长度，并在达到指定宽度时自动换行：

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

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
const text = '这是一个示例文本，用于展示如何在Canvas中实现自动换行。';
const maxWidth = 200;
const lineHeight = 25;
const x = 10;
const y = 30;

context.font = '16px Arial';
context.fillStyle = '#000';
wrapText(context, text, x, y, maxWidth, lineHeight);

在这个例子中，maxWidth 是你想要文本自动换行的最大宽度，lineHeight 是每行文本的高度。函数会将文本分割成单词，并在单词间添加空格，然后检查每个测试行的宽度。如果宽度超过了最大宽度，它就在上一个单词后面换行。