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

<canvas id="myCanvas" width="500" height="500"></canvas>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI);

ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);

ctx.stroke();

setInterval(function() {
    // 清除画布
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // 更新圆的位置
    x += speed;
    
    // 绘制直线
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    
    // 绘制圆
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI);
    ctx.stroke();
}, 10);