画布不正确的 measureText()

Posted 2023-03-07

【中文标题】画布不正确的 measureText()

【英文标题】：Canvas incorrect measureText()

【发布时间】：2020-06-22 22:20:28

【问题描述】：

我正在制作一个 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);

这是当前的输出：

【问题讨论】：

我认为这是因为您在测量之前更改了字体，请参阅此 GIST：gist.github.com/piecioshka/cce6ea53ba0db1a4700e

【参考方案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">

【讨论】：

这很好用，谢谢。我不认为你能告诉我如何添加两个从 999 级偏移的项目？我知道我可以再次运行 drawLevel，但它们将是不同的颜色，所以不确定我是如何做到的。

颜色不是什么大问题我只是改变drawLevel来接收颜色......我不确定你的意思是“添加两个从999级偏移的项目”也许你可以提出一个单独的问题，并提供您需要什么以及到目前为止您尝试过的示例图片

添加该颜色效果很好，我将尝试更好地解释，不要打开一个真正相似的线程。基本上现在它说'LEVEL 999'，我希望它说'RANK 999 LEVEL 999'（但等级将是不同的颜色，你已经解决了）

我认为你需要measureText你写的所有东西并相应地调整