时间戳

首页 > 解决方案 > 画布不正确的 measureText()

node.js - 画布不正确的 measureText()

问题描述

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

这是当前的输出： 输出 1 输出 2

标签： node.jscanvasdiscord.jsnode-canvas

解决方案

是的@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">

推荐阅读