javascript - 将 Canvas 形状动画从任意位置居中

Question

所以我对如何使形状动画到 Canvas 的中心有点困惑。我可以得到中心值:

width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight,
centerX = width / 2,
centerY = height / 2;

还可以根据初始位置是正数还是负数进行简单的递减或递增:

var x = 100;
var y = 100;

    function fn (){
       ctx.beginPath();
       ctx.arc(x, y, 50, 0, 2 * Math.PI, false);
       ctx.fillStyle = '#444';
       ctx.fill();
       ctx.closePath();

       x -= 1;
       y -= 1;
    }

动画将使用以下方式完成:

requestAnimationFrame(fn)

这一切都有问题。我每次都需要手动调整x和y。我怎样才能更好地简单地使形状的 x 和 y 值随机并使其动画到中心，无论从哪个方向以及初始位置是负还是正。我正在考虑 atang2，但说实话我并不完全确定。

Answer 1

你基本上走在正确的轨道上。使用 Math.sqrt 计算距离，使用 Math.atan2 计算方向。那么问题就在于您希望对象以多快的速度移动到目标( Canvas 的中心)。

var tx = centerX - x,
    tx = centerY - y,
    distance = Math.sqrt(tx * tx + ty * ty),
    radius = Math.atan2(ty, tx),
    angle = (radius / Math.PI) * 180;

// Ensure we don't divide by zero if distance is 0
if (distance !== 0)
{
   velX = (tx / distance) * velocity;
   velY = (ty / distance) * velocity;

   x += velX;
   y += velY;
}