其他 moveTo(x,y) 画布函数

Question

我正在寻找可以将我的形状动画到 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);
};

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

Answer 1

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

// 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;