Javascript 使用画布设置多个实例的动画

我今天工作很无聊，所以我刚开始用画布做一些东西，试着教自己一些东西。我被困在这一部分，决定接触SO社区，而不是再把头撞到墙上

其基本思想是聆听一次点击，然后创建一个随机着色的圆圈，用户在其中点击，动画变大并淡出

当你点击并让它淡出时，它的效果非常好。当画布上同时有多个圆时，问题就会出现。我可以说这是因为我是如何做我的动画循环发生的，但对于我的生活，我不知道如何做得更好

我是否应该有一个动画循环，与增长/淡入圆圈的

setInterval

分开？如果是这样，该循环应该做什么？我觉得我需要将圆的放置/增长/衰退与实际渲染分开

---

编辑：我注意到这似乎只适用于Chrome（可能也适用于safari）

解决方案是将所有绘图统一到一个位置，以便您的

setInterval

回调可以重新绘制所有内容

请查看：

---

解决方案是将所有图形统一到一个位置，以便

setInterval

回调可以重新绘制所有内容

请查看：

---

谢谢，效果很好。有几段修改过的代码让我有点困惑，但我想我了解了大部分情况。这里更新了一点：更新的版本是一些trippy，爱丽丝梦游仙境狗屎。我在这里为我的版本添加了注释：；看看他们是否有助于解释任何奇点。太好了。我已经把大部分都弄明白了。我用CirclesNext移除了这个部分，过了一会儿，我的数组变得巨大。我想你是这样做的，如果有人玩了20分钟（…我可能玩过），这不会破坏记忆。谢谢，这很有效。有几段修改过的代码让我有点困惑，但我想我了解了大部分情况。这里更新了一点：更新的版本是一些trippy，爱丽丝梦游仙境狗屎。我在这里为我的版本添加了注释：；看看他们是否有助于解释任何奇点。太好了。我已经把大部分都弄明白了。我用CirclesNext移除了这个部分，过了一会儿，我的数组变得巨大。我想你是这样做的，如果有人玩了20分钟（…我可能玩过），它不会破坏记忆。