Javascript：将球保持在圆圈动画中

Question

我在HTML画布上有一个跟踪屏幕上光标的球程序。

屏幕上也有一个圆圈，我需要使此球保持在圆圈内。

这是将球保持在画布中的当前条件。

if(ball.x < 0 || ball.x > canvas.width)
ball.dx = -ball.dx;
if(ball.y < 0 || ball.y > canvas.height)
ball.dy = -ball.dy;

ball.x，ball.y是“ ball”对象实例的x，y坐标。 ball.dy和ball.dx是球的方向，当击中画布的外部时，“-”反转球的方向。

这是圆弧的圆代码。

context.arc(canvas.width / 2, canvas.height / 2, 60, 0, 2*Math.PI, false);

格式：弧（x，y，radius，start，end，false）

如何通过不允许圆心向外移动来利用圆心？

谢谢。

Answer 1

我对此可能完全错了，但是您不能只使用勾股定理吗？ (a*a)+(b*b)=(c*c)

画布的中心是0,0

圆弧的半径是60

球的位置是29，-29

function isInsideCircle(ball,radius){
    var a=Math.pow(ball.x,2);
    var b=Math.pow(ball.y,2);
    var c=Math.sqrt(a+b);
    return c<radius;
}

球在29，-29 =距中心（在圆内）〜41的距离

球在50,50 =距中心（外圆）的距离约为71

Answer 2

您每次都必须计算边界的x和y坐标。 界线基本上围绕整个圆。 该点是圆心与当前x和y鼠标坐标以及圆之间的线的交点。 限制条件是该线的长度不超过圆的半径。 因此，如果您处在圆心与当前x和y之间的距离大于圆半径的状态，则必须将x和y坐标限制在圆的圆周上。

圆的等式为：

x^2 + y^2 = r^2

其中r是圆的半径。

一条线的等式是：

y = mx + c

其中， m是斜率， c是偏移量。 在我们的例子中，我们假设原点是圆的中心，所以我们没有c ，这意味着等式为：

y = mx

m的值呢？ m是我们的斜率，可以根据运行的上升量来计算：

rise = ball.x - yCircleCenter
run = ball.y - xCircleCenter

这意味着我们这条线的等式是：

y = (rise / run) * x

您可以将x和y值代入圆方程，以找出位于圆圆周上的x和y ，这将为您提供：

x_on_circle = (r * run) / sqrt(rise^2 + run^2)
y_on_circle = (r * rise) / sqrt(rise^2 + run^2)

假设这是一个称为limit的函数，您可以执行以下操作：

var distance = Math.sqrt(((ball.x - xCircleCenter) ^ 2) + ((ball.y - yCircleCenter) ^ 2));
if(distance > radius) {
    var limitedCoordinates = limit(ball.x, ball.y);
    ball.x = limitedCoordinates.x;
    ball.y = limitedCoordinates.y
}