JavaScript-动画形状在HTML5<画布>

JavaScript - Animated shapes behave strange in HTML5 <canvas>

本文关键字：lt 画布 gt HTML5 动画 JavaScript-      更新时间：2023-09-26

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

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

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

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

这解决了问题！

有时闪烁是因为在其他圆圈的顶部有圆圈。然而，更多的时候，这是因为你在循环浏览列表时更改了列表

如果你跟踪要删除的圆圈，然后在绘制圆圈后将其删除，效果会更好：

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);
}

分叉的小提琴。

相关文章：