Question

我有一个XP系统，我掌握了某人要升级的程度的百分比，并创建了一个矩形。但我不知道如何根据百分比更改宽度... 我很容易找到百分比，但是我需要一种编码百分比0 =起点259，而100％为630的方法。

    const rectX = 259;
    const rectY = 182;
    const rectWidth = 630;
    const rectHeight = 38;
    const cornerRadius = 20;

    ctx.lineJoin = 'round';
    ctx.lineWidth = cornerRadius;
    ctx.strokeStyle = '#FF1700';
    ctx.fillStyle = '#FF1700';

    ctx.strokeRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);
    ctx.fillRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);

Answer 1

您只需要将矩形的宽度乘以percentage / 100。这就是您的示例代码的样子。

const rectX = 259;
const rectY = 182;
const rectWidth = 630;
const rectHeight = 38;
const cornerRadius = 20;

const scale = Math.min(1, Math.max(0, percentage / 100));

ctx.lineJoin = 'round';
ctx.lineWidth = cornerRadius;
ctx.strokeStyle = '#FF1700';
ctx.fillStyle = '#FF1700';

ctx.strokeRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);
ctx.fillRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth * scale - cornerRadius , rectHeight - cornerRadius);

当百分比为100%时，比例将为1，矩形的宽度将为630。当百分比为50%时，比例将为0.5，宽度将为315，依此类推。

Answer 2

因此，据我了解，您有两个数字，从259开始，到630结束，50％表示这两个数字之间的中点，100％表示630，0％表示259，对吗？

如果是这种情况，那么您需要使用称为LERP（线性插值）的东西，

const lerp = (start: number, end: number, percentage: number): number => {
    return (((end - start) * percentage) / 100) + start;
};

或者，如果您要使用javascript，只需删除类型定义，

它的工作方式是将开始数标准化为0，

现在使用此方法非常简单：console.log(lerp(259, 630, 50))

返回：444.5

画布更改宽度取决于完成百分比

2 个答案: