使用画布时的渲染体验不正确。帆布

Question

我正在尝试使用画布渲染体验，但是当我渲染体验时它超出了范围。 here

    const exp = users.xp;

    ctx.beginPath();
    ctx.lineWidth - 4;
    ctx.strokeStyle = '#ffffff';
    ctx.globalAlpha = 0.2;
    ctx.fillStyle = '#433F99';
    ctx.fillRect(253 + 18.5, 130, 420, 45);
    ctx.fill();
    ctx.globalAlpha = 1;
    ctx.strokeRect(253 + 18.5, 130, 420, 45);
    ctx.stroke();

    ctx.fillStyle - '#3F9946';
    ctx.globalAlpha = 0.6;
    ctx.fillRect(253 + 18.5, 130, exp, 45);
    ctx.fill();
    ctx.globalAlpha = 1;

Answer 1

在填充矩形时，您只是将exp 直接插入width 参数。 exp 似乎大于 420（体验栏的宽度），所以它填充到了体验栏之外。

您需要定义一个最大值 - 经验条应该是多少？
然后，您需要一种行为来处理当用户获得 更多 体验超过该最大值时会发生什么 - 如果可能的话。酒吧是否重新启动？它只是结束而不显示过去的任何内容吗？

这是一个最大经验为 500 且条形上限为最大值的示例。

let width = (exp / 500) * 420; //convert exp to "percent to full", then convert to width
ctx.fillRect(253 + 18.5, 130, Math.min(width, 420), 45); //if width > 420, cap at 420

编辑：如果您的体验系统具有“总体验”，并且用户在体验里程碑达到一定级别，您只需要获得从上一个级别到下一个级别的百分比进度。

所以，例如：

let exp = 1450; //sample value
let levels = [100, 500, 1000, 2000, 4000]; //some example levels

//get current level somehow - in this case with an array of exp thresholds, this will work
let currentLevel = levels.findIndex(l => exp < l) - 1; // = 2
let expTowardsNextLevel = exp - levels[currentLevel]; // = 450
let percentProgress = expTowardsNextLevel / (levels[currentLevel+1] - levels[currentLevel]);
ctx.fillRect(253 + 18.5, 130, Math.min(width, 1) * 420, 45);