如何繪製邊緣相交的兩個圓圈？

在<canvas>元素中，我爲可以相互碰撞的一組圓圈設置動畫。偶爾這些碰撞發生在主循環的迭代之間，並且在下一次迭代中，循環彼此「內部」。如何繪製邊緣相交的兩個圓圈？

爲了解決這個問題，我計算了兩個圓之間的碰撞點（C），現在希望推動圓的座標，使它們的邊在這個影響點上相遇。我一直在玩弄他們的速度，將他們沿着原始媒介彼此移開，但我似乎無法做到。

如何計算A和B的「微調」座標，使其邊緣在C處相交？

Diagram of collision

2014-05-17 jthomas

你能建立一個的jsfiddle與

var dx=C.x-A.x; var dy=C.y-A.y; var angleC=Math.atan2(dy,dx); var newAX=C.x+A.radius*Math.cos(angleC-PI); var newAY=C.y+A.radius*Math.sin(angleC-PI);

，做同樣的用B.你現有的代碼？ –

enter image description here

方法如下：

2014-05-17 18:02:46 markE

您可以通過更改'angleC-PI' - >'angleC'和交換dx和dy diff順序來簡化它，即。 'dx = A.x-C.x'。 – K3N

+如果可以的話，小提琴的獎勵積分。 – jthomas

@Epistemex：是的，感謝您注意到優化！我的思想走了一條路，我忘了檢查更短的路徑。 :-)題外話：您的個人資料頁上的.gif的讚譽！你使用任何特定的編碼器？ – markE

回答