canvas 绘制矩形 根据文字换行高度自适应

要根据文字换行高度自适应绘制矩形，可以使用Canvas的measureText()方法来计算文字的宽度，根据宽度和绘制矩形的宽度来计算出需要换行的行数。接着，可以使用Canvas的fillText()方法来绘制文字。

下面是一个示例代码：

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

const text = '这是一段需要自适应换行的文字，可以根据矩形的宽度和字体大小来计算换行高度。';
const fontSize = 16;
const rectWidth = 200;
const lineHeight = fontSize * 1.5;

ctx.font = `${fontSize}px sans-serif`;

const words = text.split(' ');
let line = '';
let y = 0;
for (let i = 0; i < words.length; i++) {
  const testLine = line + words[i] + ' ';
  const testWidth = ctx.measureText(testLine).width;
  if (testWidth > rectWidth && i > 0) {
    ctx.fillText(line, 0, y);
    line = words[i] + ' ';
    y += lineHeight;
  } else {
    line = testLine;
  }
}
ctx.fillText(line, 0, y);
const rectHeight = y + lineHeight;
ctx.fillRect(0, 0, rectWidth, rectHeight);

在这个示例中，我们首先定义了需要绘制的文字、字体大小和矩形的宽度。然后，我们使用Canvas的measureText()方法计算出文字的宽度，并根据宽度来计算需要换行的行数。接着，我们使用Canvas的fillText()方法来绘制文字，并在需要换行的时候更新y值。最后，我们使用Canvas的fillRect()方法来绘制矩形。