JavaScript 画布文本比例

Question

我有一个固定尺寸的画布（850x400像素），当我在这个画布上添加文本时，它以一种奇怪的方式被放大了，我不知道为什么。

如果我不设置画布的特定高度/宽度，文本就会正常显示，为什么会这样？

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);
}

以下是画布字段中文本的外观：

如何插入按照正常40px字体缩放的文本？

- David

Answer 1

我认为您没有指定canvas 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>

更新

另一种选择是通过编程设置宽度和高度，这将防止缩放：

let canvas = document.getElementById("canvas");

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

我使用了窗口的宽度和高度，但任何其他元素也可以实现。

- Tamas Szoke

---

它被设置为宽度：100％和高度：100％，在我的情况下是450x850。 - David

如果您将其设置在CSS类中，那可能是问题的原因。 - Tamas Szoke

我已经解决了这个问题，我的解决方案几乎与您的相同:ctx.canvas.width = $（“＃imageFrame”）.width（）;和 ctx.canvas.height = $（“＃imageFrame”）.height（）;frame 是父元素。 - David