canvas 绘制矩形 根据换行 文字内容设置高度

您好！感谢您的提问。

要根据换行文字内容设置矩形的高度，需要先将文字进行分行处理，然后根据行数和每行的高度计算出矩形的高度。

以下是一个示例代码，展示如何根据文字内容自适应绘制矩形：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.';
const maxWidth = 200;
const lineHeight = 20;
const words = text.split(' ');
let line = '';
let y = 50;
let lineCount = 0;

for (let i = 0; i < words.length; i++) {
  const testLine = line + words[i] + ' ';
  const metrics = ctx.measureText(testLine);
  const testWidth = metrics.width;
  if (testWidth > maxWidth && i > 0) {
    ctx.fillText(line, 50, y);
    line = words[i] + ' ';
    y += lineHeight;
    lineCount++;
  } else {
    line = testLine;
  }
}

ctx.fillText(line, 50, y);
lineCount++;

const rectHeight = lineCount * lineHeight;
ctx.strokeRect(50, 50, maxWidth, rectHeight);

这段代码会将文本内容分行处理，并计算出行数和每行的高度，最后根据行数和每行的高度计算出矩形的高度，并绘制矩形。

希望能对您有所帮助！