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

Posted 2023-01-05

我有一个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);

我有一个XP系统，我掌握了某人要升级的程度的百分比，我创建了一个矩形。但我不知道如何根据百分比更改宽度...我有...

答案

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

另一答案

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

如果是这种情况，那么您需要这个叫做LERP（线性插值）的东西，