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是“球”对象实例的x，y坐标。 ball.dy和ball.dx是球的方向，当球击到画布外面时，“ - ”反转球的方向。

这是圆弧的圆圈代码。

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

格式：arc（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之间的距离大于圆的半径的状态，则必须限制{{1} }和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