Javascript 用HTML、CSS和JQuery中的其他小形状填充形状

我想使用html、css和jQuery动态地用任意大小和任意数量的球填充一个形状

例如，在所附的图中，“图A”是用户添加球时我要填充的自定义形状（当用户添加注释时，球实际上是用户图片）。例如，100个用户发表评论，我想把100个大小、颜色随机的球放在“图A”的形状上。图A当前显示的是一条线，但当我用这些圆填充它时，该线将不可见，因此形状将从这些圆变成

你知道怎么做到吗？或者有人以前在HTML、CSS、jQuery中做过的任何例子

---

提前感谢。

我有两种方法来解决这个问题：

画出圆圈，例如对布局进行硬编码，并将其隐藏，直到填充完毕。CICLE基本上是具有唯一ID的占位符

如果圆环是动态创建的，请使用box2dweb，这是一个内置碰撞检测的物理引擎。它需要一把大锤来敲开一个螺母，但它允许您通过一些引人注目的动画和用户交互来扩展您的项目。圆圈可以拖动，用户可以移动图片等。您可以自行设置重力，以便它们可以下落或漂浮到您构建的包含形状中。Seth Ladd有一套完整的在线教程。你也需要对html画布有很好的理解

---

圆圈重叠可以接受吗？@fiddler感谢您的及时评论。重叠的圆圈，实际上没有。我希望它们在圆圈周围有一个小的边距，比如2px；你想要达到的目标很难。如果你已经有了一些东西，并且在某个时候陷入困境，那就更好了。“最简单”的解决方案是已经放置了一组点，并创建了一个重叠算法，该算法将说明-如果我的位置被最大的圆占据，则将最近的点从“可用点”数组中排除，以防止任何较小的圆与我重叠“。也可以用谷歌搜索探测圆圈碰撞。你愿意为此花多少天的时间？@ThomasW我猜是3到4天，或者可能是一周。”。