绘制到 canvas 时如何缩放文本？

Question

我正在使用 CSS 变换比例缩放文本，例如

transform: scale(2, 4);
fontSize: 20px // do I need to include fontSize?

我还需要在 canvas 元素上绘制相同的文本

function draw() {
  const ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '20px serif';
  ctx.fillText('Hello world', 10, 50);
}

我应该如何缩放上面的js function中的文本？ 我已经硬编码了字体大小20px但我将如何使用2和4的比例值？

Answer 1

您可以通过调用上下文的比例 function 来设置 canvas 的上下文以进行缩放。

这是一个例子：

 function draw() { const ctx = document.getElementById('canvas').getContext('2d'); ctx.font = '20px serif'; ctx.scale(2, 4); ctx.fillText('Hello world', 10, 50); } window.onload = draw;

 <canvas id="canvas" width="250" height="250"></canvas>

完成绘制文本后，不要忘记重置比例。