JavaScript-动画形状在HTML5中表现奇怪<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);
}

分叉的小提琴。