如何绘制文本 在指定宽高里面 ，文字自适应宽高

在 canvas 中绘制自适应宽高的文本，可以使用 `measureText()` 方法来计算文本的宽度，然后根据计算出的宽度和高度来绘制文本。

下面是一个示例代码，演示如何在指定宽高内绘制自适应的文本：

// 选择 canvas 元素
var canvas = document.getElementById('myCanvas');

// 获取 2D 上下文
var ctx = canvas.getContext('2d');

// 设置最大宽度和高度
var maxWidth = 200;
var maxHeight = 100;

// 设置字体样式
var fontSize = 30;
ctx.font = fontSize + 'px Arial';

// 定义文本内容
var text = 'Hello World! This is some long text that will wrap.';

// 计算文本的宽度
var textWidth = ctx.measureText(text).width;

// 如果文本的宽度超过了最大宽度，就进行自动换行
if (textWidth > maxWidth) {
  var words = text.split(' ');
  var line = '';
  var lines = [];

  for (var i = 0; i < words.length; i++) {
    var testLine = line + words[i] + ' ';
    var testWidth = ctx.measureText(testLine).width;

    if (testWidth > maxWidth) {
      lines.push(line);
      line = words[i] + ' ';
    } else {
      line = testLine;
    }
  }

  lines.push(line);
  text = lines.join('\n');
}

// 计算文本的高度
var textHeight = fontSize * (text.split('\n').length);

// 如果文本的高度超过了最大高度，就缩小字体大小
if (textHeight > maxHeight) {
  fontSize = fontSize * (maxHeight / textHeight);
  ctx.font = fontSize + 'px Arial';
  textHeight = fontSize * (text.split('\n').length);
}

// 计算文本左上角的坐标
var x = (canvas.width - textWidth) / 2;
var y = (canvas.height - textHeight) / 2;

// 绘制文本
ctx.fillText(text, x, y);

这个示例代码中，我们首先定义了最大宽度和高度，然后设置了字体样式和文本内容。接着，我们使用 `measureText()` 方法计算了文本的宽度，如果文本宽度超过了最大宽度，就进行自动换行，计算出每一行的文本内容。然后，我们根据每行文本的长度计算出文本的高度，如果文本高度超过了最大高度，就缩小字体大小，重新计算文本高度。

最后，我们计算出文本左上角的坐标，使用 `fillText()` 方法在 canvas 中绘制文本。