JavaScript画布文本比率

Question

我有一个固定大小的Canvas（850x400px），当我向该画布中添加文本时，它以一种奇怪的方式放大了，我不知道为什么。

如果我未将画布设置为特定的高度/宽度，则文本显示为正常，这是为什么？

export function addText() {
  var canvas = document.getElementById("canvas"); // 850x400px
  var ctx = canvas.getContext("2d");
  var y = 1 * 20 + 20;

  var text = {
    text: "ABC",
    x: 20,
    y: y
  };

  ctx.font = "40px consolas";
  text.width = ctx.measureText(text.text).width;
  text.height = 80;
  ctx.fillText(text.text, text.x, text.y);
}

这是canvas字段中的文本看起来像：

如何插入像普通的40px字体一样缩放的文本？

Answer 1

我认为您尚未指定画布HTML元素本身的宽度和高度，请尝试：

addText();

function addText() {
  var canvas = document.getElementById("canvas"); // 850x400px
  var ctx = canvas.getContext("2d");
  var y = 1 * 20 + 20;

  var text = {
    text: "ABC",
    x: 20,
    y: y
  };

  ctx.font = "40px consolas";
  text.width = ctx.measureText(text.text).width;
  text.height = 80;
  ctx.fillText(text.text, text.x, text.y);
}

<canvas id="canvas" width="850" height="400" style="background: red"></canvas>