1

我有一个跟随屏幕光标的球程序，在 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);

格式：弧（x，y，半径，开始，结束，假）

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

谢谢你。

4

2 回答 2

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 的距离（外圈）

于 2013-11-08T19:23:41.250 回答
0

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

圆的方程是：

x^2 + y^2 = r^2

r圆的半径在哪里。

一条线的方程是：

y = mx + c

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

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
}
于 2013-11-08T19:34:09.277 回答