Javascript 画布上速度的图形表示

我有以下代码：

说明：我有一个适合用户窗口的画布。我试图用以下起始参数在画布上表示速度进度： 速度、最大速度（速度限制）和每毫秒加速速度的推力

酒吧开始加速从一定的速度（0.00019）和当你达到全速酒吧的宽度正是画布的宽度。它工作得很好，但正如你所看到的，图形条开始于某个x点，而不是0x，因为我决定开始速度应该很快。 我怎样才能在0x开始时仍保持准确的速度进度

下面是它应该是什么样子（当然这里不包括我所说的逻辑）：

---

您可以重新映射0和最大值之间的值。 Javascript没有用于此目的的本机内置函数

但你可以举一个例子：

Math.map = function (value, istart, istop, ostart, ostop) {
    return ostart + (ostop - ostart) * ((value - istart) / (istop - istart));
}

或者继续下去

此函数将值重新映射到新范围

所以在你的情况下，你要定义

var mapStart = width* ((height * 0.00019)/maxVelocity);

并将（速度、宽度）计算映射为介于0和最大宽度之间

var mappedValue = Math.map((width * (velocity / maxVelocity)), mapStart, width, 0, width);
ctx.fillRect(1, height / 2, mappedValue, height / 30);

var mappedValue = Math.map((width * (velocity / maxVelocity)), mapStart, width, 0, width);
ctx.fillRect(1, height / 2, mappedValue, height / 30);