Canvas 不正确的 measureText()

Question

我正在制作一个 Discord 机器人并试图显示某人的等级，我希望它基本上可以说 "LEVEL 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">

Canvas 不正确的 measureText()

Canvas incorrect measureText()

canvas

node.js

node-canvas

discord.js