关于canvas绘制竖排文字压缩变扁该如何实现

Question

根据上图绘制完竖排文字后，不想换行，而是压缩高度使其文本变扁以适应最大高度，该如何实现。
如下图所示：

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

为了实现竖排文字压缩变扁的效果，可以对每个字符的高度进行缩放。具体实现方法如下：

1. 计算文本的总高度（未压缩前）。
2. 如果总高度大于最大高度，则计算压缩比例。
3. 使用ctx.transform()方法设置压缩矩阵。
4. 绘制竖排文字。

以下是实现的代码：

function drawCompressedVerticalText(ctx, text, x, y, maxHeight) {
  // 计算文本的总高度（未压缩前）
  let totalHeight = text.length * ctx.measureText('天').height;

  // 如果总高度大于最大高度，则计算压缩比例
  let scaleY = totalHeight <= maxHeight ? 1 : maxHeight / totalHeight;

  // 保存当前变换矩阵
  ctx.save();

  // 设置压缩矩阵
  ctx.transform(1, 0, 0, scaleY, x, y);

  // 绘制竖排文字
  for (let i = 0; i < text.length; i++) {
    ctx.fillText(text[i], x, y + i * ctx.measureText('天').height);
  }

  // 恢复变换矩阵
  ctx.restore();
}

// 调用示例
const ctx = canvas.getContext('2d');
let text = '今天非常开心，希望每天如此呀';
drawCompressedVerticalText(ctx, text, x, y, maxHeight);

这样，当文本的总高度大于最大高度时，文本会被压缩以适应最大高度。