Javascript:将球保持在圆圈内动画

Javascript: keeping ball within the circle animation

本文关键字：动画 Javascript      更新时间：2023-09-26

我有一个球的程序，它跟随屏幕上的光标，在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，半径，开始，结束，假）

如何通过不允许圆的中心点移出圆来利用圆的中心点？

谢谢。

我可能完全错了，但你不能只使用勾股定理吗？ (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

每次都必须

计算边界的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
}
相关文章：