Javascript HTML5画布以相同速度在定义线上移动圆

我有一个具体的问题。我有两个矩形，我在计算这两个矩形之间的直线。现在我想在这条线上画一个圆圈，它在这条线上以特定的速度向前移动。我总是用新的坐标重新画圆，这就是我解决运动的方法

现在我把圆的x坐标加上，总是1，然后用我的方程计算y坐标。这里的问题是，我的直线斜率越高，圆圈移动得越快

那么我如何计算x坐标，球的速度总是相同的

下面是我的代码。posX和posY是我覆盖的球的位置。枪和弹药是我的两个长方形

this.posX = this.posX - 1;
this.posY = ((this.gunY - this.ammoY) / (this.gunX - this.ammoX)) * (this.posX - this.ammoX) + this.ammoY;

单位向量 使用线的单位（标准化）向量。规格化向量始终为一个单位长（除非直线没有长度），您可以将向量缩放到所需的速度

标准化线 示例

？

应该是数字

// the line start and end
const startX = ?
const startY = ?
const endX = ?
const endY = ?

function getLineNormal() {

    // get the line vector
    const vx = endX - startX
    const vy = endY - startY

    // get the line length
    const len = Math.hypot(vx, vy)

    // Only if the line has length
    if (len > 0) {
        // calculate normal of vector
        return {x: vx / len, y: vy / len}

    } 
    return return {x: 0, y: 0}
}

缩放向量并添加单位向量 使用矢量以恒定速度移动。速度缩放法向量

// set circle at start of line.
var circleX = startX
var circleY = startY
const lineVec = getLineNormal()

function moveCircle(speed) { // speed in pixels
    circleX += lineVec.x * speed
    circleY += lineVec.y * speed
}

---

非常感谢你。它工作得很好：）