JavaScript - 动画形状在HTML5 <canvas> </canvas>中表现得很奇怪

Question

我有一个小型的大学项目。我使用<canvas>元素为圈子制作动画。它们从底部边界出现并平滑地向上移动。圆的X坐标，半径和颜色随机选择。

问题在于，当我的圆圈到达<canvas>的上边界时，它们会开始闪烁，有时会改变颜色。这是JSFIDDLE。我究竟做错了什么？感谢。

Answer 1

for...in非常适合迭代对象，但它不是为迭代数组而设计的。从本质上讲，你的i正在跳跃一下。而不是使用for...in，使用这个（非常有效的）循环：

for(var i = circles.length; i--;) {

解决了这个问题！

Answer 2

有时会发生眨眼，因为其他圈子上方有圆圈。但更常见的是，这是因为你在循环中改变列表。

如果您改为跟踪要删除的圈子，然后在绘制圆圈后删除它们，它看起来更好：

function animateCircles() {
    if(frameCounter % 4 === 0) addCircle();
    var remove = [];
    for(var i = 0; i < circles.length; ++i) { // DON'T USE for ... in on an array!
        circles[i]['y'] -= 2;
        drawCircle(circles[i]['x'], circles[i]['y'], circles[i]['r'], circles[i]['c']);
        if(circles[i]['y'] < -circles[i]['r']) remove.push(i);
    }
    for (i = remove.length; --i >= 0; )
        circles.splice(remove[i], 1);
}

Forked fiddle.