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 是每行文字的高度。函式會將文字分割成單詞，並在單詞間新增空格，然後檢查每個測試行的寬度。如果寬度超過了最大寬度，它就在上一個單詞後面換行。