Javascript 其他移动到（x，y）画布函数

我正在搜索画布函数，它可以将我的形状设置为x，y位置。 例如，我有一个数组，其中包含所有要绘制的形状，我只是“告诉”对象“动画到x，y坐标”，如下所示：

// Array that holds all the shapes to draw
var shapes = new Array();

// Setting up some shapes
for (var i = 0; i < 10; i++) {
    var x = Math.random()*250;
    var y = Math.random()*250;
    var width = height = Math.random()*30;
    shapes.push(new Shape(x, y, width, height));
};

function animate() {
    // Clear
    context.clearRect(0, 0, canvasWidth, canvasHeight);

    // Loop through every object
    var shapesLength = shapes.length;
    for (var i = 0; i < shapesLength; i++) {
        var tmpShape = shapes[i];

        //here should go function that would animate my shape to x,y postition
        var x = tmpShape.x????;
        var y = tmpShape.y????;

        // Draw
        context.fillRect(x, y, tmpShape.width, tmpShape.height);
    };

    setTimeout(animate, 33);
};

// pct goes from 0.00 to 1.00 as you go from the starting to ending points

var dx=endingX-startingX;
var dy=endingY-startingY;
var nextX=startingX+dx*pct;
var nextY=startingY+dy*pct;

//保存要绘制的所有形状的数组
var shapes=新数组（）；
//设置一些形状
对于（变量i=0；i<10；i++）{
var x=Math.random（）*250；
var y=Math.random（）*250；
var width=height=Math.random（）*30；
推（新形状（x、y、宽度、高度））；
};
函数animate（）{
//清楚的
clearRect（0，0，画布宽度，画布高度）；
//循环遍历每个对象
var shapesLength=shapes.length；
对于（var i=0；i

---

我什么都没试过，因为我根本不知道怎么做。

如果你沿着一条直线从起点移动到终点，你可以按该行程的指定百分比计算XY，如下所示：

// Array that holds all the shapes to draw
var shapes = new Array();

// Setting up some shapes
for (var i = 0; i < 10; i++) {
    var x = Math.random()*250;
    var y = Math.random()*250;
    var width = height = Math.random()*30;
    shapes.push(new Shape(x, y, width, height));
};

function animate() {
    // Clear
    context.clearRect(0, 0, canvasWidth, canvasHeight);

    // Loop through every object
    var shapesLength = shapes.length;
    for (var i = 0; i < shapesLength; i++) {
        var tmpShape = shapes[i];

        //here should go function that would animate my shape to x,y postition
        var x = tmpShape.x????;
        var y = tmpShape.y????;

        // Draw
        context.fillRect(x, y, tmpShape.width, tmpShape.height);
    };

    setTimeout(animate, 33);
};

// pct goes from 0.00 to 1.00 as you go from the starting to ending points

var dx=endingX-startingX;
var dy=endingY-startingY;
var nextX=startingX+dx*pct;
var nextY=startingY+dy*pct;

---

“询问代码的问题必须表明对正在解决的问题的最低理解。包括尝试的解决方案、为什么它们不起作用以及预期的结果。”欢迎使用Stackoverflow，感谢您添加代码。我们通过在这里消费代码而茁壮成长！指定百分比是什么意思？因此，如果pct=0.00，则您处于线段的起点。如果pct=0.33，则自始至终为1/3。如果pct=1.00，你就在线段的终点，明白了。顺便说一句，我正在搜索类似于和的东西，但对于直线是的，这个公式将在任何起点[startingX，startingY]和任何终点[endingX，endingY]之间导航一条直线，然后通过清除画布和context.fillRect（newX，newY，shape.width，shape.height）来“移动”形状对于您的最后一个问题：否。您希望在动画循环中将pct从0.00增加到1.00，以沿直线自始至终计算XY。