画布不正确的 measureText()

Question

我正在制作一个 Discord 机器人并尝试显示某人的级别，例如，我希望它基本上说“级别 1”，但是单词级别和实际级别之间的距离会根据他们所处的级别而改变.所以我试图稍微抵消这个词，但是当我使用 measureText() 时，它显示不正确。代码：

    const levelNumber = '1';
    const levelText = 'LEVEL';

    ctx.font = '48px Shapirit';
    ctx.fillStyle = '#FF1700';
    ctx.textAlign = 'right';
    ctx.fillText(levelNumber, 880, 96.8);

    ctx.font = '22px Shapirit';
    ctx.fillStyle = '#FF1700';
    ctx.textAlign = 'right';
    ctx.fillText(levelText, 880 - ctx.measureText(levelNumber).width - 20, 96.8);

这是当前的输出：

Answer 1

是的@Jay 是对的。您必须使用正确的字体measureText，否则您会得到错误的结果。

请看下面的示例

function drawLevel(x, y, txt, num, style) {
  ctx.font = '48px Shapirit';
  ctx.fillStyle = style;
  ctx.textAlign = 'right';
  ctx.fillText(num, x, y);
  w = ctx.measureText(num).width

  ctx.font = '22px Shapirit';
  ctx.fillStyle = style;
  ctx.textAlign = 'right';
  ctx.fillText(txt, x - w - 20, y);
}


canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

drawLevel(200, 40, 'LEVEL', '999', '#FF1700');
drawLevel(200, 80, 'LEVEL', '11', '#0000FF');
drawLevel(200, 120, 'LEVEL', '1', '#00FF00');

<canvas id="canvas">