如何在Canvas绘制时缩放文本？匹配CSS transform scale效果

一、CSS 中是否需要设置 fontSize: 20px？ #

transform: scale(2, 4) 是对元素做视觉层面的缩放，不会改变元素本身的布局尺寸和原始字号：

• 如果文本默认继承的字号就是 20px，不写 fontSize: 20px 也能得到缩放效果，但为了避免父元素样式干扰，确保基础字号固定为 20px，建议显式加上该属性。
• 若不设置，缩放的是继承来的字号，最终视觉大小会是「继承字号 × 缩放比例」，可能和你预期的「20px × 缩放比例」不符。

二、Canvas 中实现相同缩放效果的方案 #

要和 CSS transform: scale(2,4) 效果完全匹配，推荐使用 Canvas 上下文的缩放方法，具体代码修改如下：

方法：使用 ctx.scale() 实现视觉拉伸（和 CSS 效果一致） #

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  // 保存当前上下文状态，避免影响其他绘制操作
  ctx.save();
  
  // 设置x轴缩放2倍，y轴缩放4倍
  ctx.scale(2, 4);
  // 缩放后坐标系会被拉伸，所以绘制位置要除以对应缩放比例，保证文本位置和原代码一致
  ctx.font = '20px serif';
  ctx.fillText('Hello world', 10 / 2, 50 / 4);
  
  // 恢复上下文初始状态
  ctx.restore();
}

补充：如果尝试直接修改字体大小（比如设置 40px serif），只能实现等比缩放，无法做到 CSS 那样的非等比宽高拉伸，所以这种方法不适用于你的需求。

内容的提问来源于stack exchange，提问作者grabury