Javascript HTML5画布：将一个完整的圆与一个分段的圆碰撞

编辑：我可以用角度来划分半径吗

问题：为了学习HTML5画布中的碰撞艺术，我目前正在尝试用一个完整的圆与一个分段的圆碰撞，在本例中是一个半圆

我的尝试：我的第一个想法是简单的圆周碰撞，但我错了。我阅读了关于碰撞检测的各种来源，但它们都是标准圆/圆、长方体/圆、长方体/长方体或多边形碰撞公式

我的问题：一个完整的圆与一个分割的圆碰撞的公式是什么？似乎除了半径之外，还有其他因素在起作用。也许弧度也是

尝试：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var C1 = {x: 45, y: 65, radius: 20};
var C2 = {x: 60, y: 20, radius: 20};

var dx = C1.x - C2.x;
var dy = C1.y - C2.y;
var distance = Math.sqrt(dx * dx + dy * dy);

ctx.beginPath();
ctx.arc(C1.x, C1.y, C1.radius, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();

ctx.beginPath();
ctx.rotate(0.3); 
ctx.arc(C2.x, C2.y, C2.radius, 0, Math.PI * 1);
ctx.fillStyle = 'red';
ctx.fill();

if (distance < C1.radius + C2.radius) {
    alert('true')
}
else {
    alert('false')
}

var canvas=document.getElementById（'canvas'）；
var ctx=canvas.getContext（'2d'）；
VarC1={x:45，y:65，半径：20}；
var C2={x:60，y:20，半径：20}；
var dx=C1.x-C2.x；
var dy=C1.y-C2.y；
变量距离=数学sqrt（dx*dx+dy*dy）；
ctx.beginPath（）；
ctx.弧（C1.x，C1.y，C1.radius，0，Math.PI*2）；
ctx.fillStyle='绿色'；
ctx.fill（）；
ctx.beginPath（）；
ctx.旋转（0.3）；
ctx.弧（C2.x，C2.y，C2.radius，0，Math.PI*1）；
ctx.fillStyle='红色'；
ctx.fill（）；
if（距离

要使用的演示：jsfiddle.net/tonyh90g/1

---

我的学习资源：

如果你在正确的轨道上，你不仅需要计算中心之间的距离，还需要计算线段上交点的角度

在一般笛卡尔坐标中，可以使用

Math.atan2（dy，dx）

计算角度，其中

dx

和

dy

是从线段到圆的坐标差。如果这些角度落在线段的角度之间，则表示命中

[注意：在触摸的精确点上只有一个点，但是如果两个对象最终稍微重叠，这在动画中并不少见，您将得到两个点]

圆也可能与线段相交，而不是与线段的圆形部分相交，但我认为这些情况无论如何都会被正确捕获。这可能需要进一步调查，如果需要，需要进行线段/圆相交测试

---

我还注意到，在您的小提琴中，您正在扇区上使用

rotate（）

变换。除非你特别说明，否则这会扰乱你的角度计算。在整个过程中使用绝对角度可能更容易。

我试图做的只是检测它们何时碰撞（精确的接触点），而不是相交。你能举一个简单的例子，让我了解如何合并角度吗？我可以用angle@asperger不，那不行-你需要使用

Math.atan2（dy，dx）

其中

dy

和

dx

是圆心之间的差异。还要注意，y坐标向下为正，而标准笛卡尔坐标向上为正。我使用了你的公式。请让我知道实施是否正确。我会接受你的邀请answer@Asperger我不知道你为什么认为你需要除以任何东西-你需要测试

semi>=0&&semi

（还有距离测试），但只有在你校正了Y轴方向，并确保dx和dy有正确的符号（否则你的角度将是180度）@眯着眼睛也许你有兴趣看看这个