Javascript 如何在html5中随机生成圆圈而不重叠？

我在一个网站上工作，那里有很多youtube缩略图加载到圆圈中。圆应随机生成，不重叠。这是最新的。不知道如何在我的站点中加载这个圆圈内的图像而不重叠。我正在使用kineticjs。如果有必要，我可以转换到其他代码或插件。还有这些图像的点击事件。谢谢你

//js
 var circle = new Kinetic.Circle({
          x: Math.random() * stage.getWidth(),
          y: Math.random() * stage.getHeight(),
          radius: Math.random() * 50 + 30,
          fill: Kinetic.Util.getRandomColor(),
          id: id
        });

---

最简单的方法可能是在创建渲染圆时保留渲染圆的数组。然后仅向渲染层添加有效的（非重叠的）渲染层

如果圆心之间的距离小于半径之和，则一个圆与另一个圆重叠。换句话说，如果圆2（具有中心（x2，y2）和半径r2）满足所有预先存在的圆（具有中心（x1，y1）和半径r1）的以下条件，则仅添加圆2（具有中心（x2，y2）和半径r2）

（（x2-x1）^2+（y2-y1）^2）^（1/2）>（r1+r2）

---

如果没有，则丢弃它并尝试生成另一个

你似乎有不止一个问题。你对圆的位置感兴趣吗？图片渲染？点击事件处理？@dystroy：我主要需要的是在圆圈内生成图片，而不是重叠。这种方法存在无限循环的巨大风险。是的，当然会添加一些终止条件。。。类似于在3次尝试后无法添加圆时停止。这应该通过智能参数选择来增强，例如确保半径不超过可见屏幕的一定比例，以便通常渲染足够数量的圆。这些参数应该被调整，直到一个美观的圆的分布经常是结果。此时，我们正滑向设计领域，而不是编程领域。+1@netsydmiro一个变体，可以防止您的圆因随机机会而“聚束”：保持一组均匀分布的中心点。当需要另一个图像时，从阵列中拉出下一个中心点，半径=Math.random（）*someMaxRadius+someMinRadius。