使用画布对多个实例进行动画处理

Question

jsfiddle在这里

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

基本思想是先听一下点击，然后在用户点击的位置创建一个随机彩色的圆圈，以更大的尺寸动画并逐渐消失。

当您单击并使其淡出时，它的效果很好。 当您一次在画布上有多个圆圈时，就会出现问题。 我可以说这是因为我正在制作动画循环而发生的，但是对于我一生来说，我不知道该如何做得更好。

我是否应该有一个与setInterval分开的动画循环，该循环会增加/淡化圆圈？ 如果是这样，该循环应该做什么？ 我觉得我需要将圆的放置/生长/渐变与实际渲染分开。

编辑：我注意到这似乎仅在Chrome中有效（也许也可以使用野生动物园）

Answer 1

解决方案是将所有图形统一到一个位置，以便setInterval回调可以重画所有内容。

检查一下： http : //jsfiddle.net/ybcHk/7/