javascript - 用 HTML、CSS、JQuery 中的其他小形状填充形状

Question

我想使用 html、css 和 jQuery 用随机大小和随机数量的球动态填充形状。

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

知道如何实现吗？或者之前有人在 HTML、CSS、jQuery 中做过的任何例子？

提前致谢。

Answer 1

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

1. 绘制出圆圈，例如对布局进行硬编码并将它们隐藏起来，直到它们被填充。cicles 基本上是具有唯一 ID 的占位符。
2. 如果圆圈是动态创建的，请使用 box2dweb，它是一个内置碰撞检测的物理引擎。它需要一把大锤来破解坚果，但它可以让您通过一些引人注目的动画和用户交互来扩展您的项目。圆圈可以拖动，用户可以移动他们的图片等。您可以自己设置重力，以便它们可以落下或漂浮到您构建的包含形状中。Seth Ladd 有一套全面的在线教程。你也需要对 html canvas 有很好的理解。