如何绘制边缘相交的两个圆圈？

在<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

回答