在javascript（canvas）中为for循环设置动画

Question

我制作了一个绘制40个矩形的for循环，它们都需要高度：400px;但我想从高处开始：0;并使用requestAnimationFrame动画显示为400这是我的代码：

function draw(){

    height += 5;
        if(height > 1){
            for (var i = 0; i < dataSales.length; i++) {

                    geel += 6;
                    blauw += 6;
                    groen -= 6;
                    xPos += 23;
                    ctx.beginPath();
                    ctx.fillStyle= "#89C349";
                    ctx.rect(xPos,595,20,-height);
                    ctx.fill();
            }
        }
    window.requestAnimationFrame(draw);
    }

Answer 1

问题是第二次preUpdate()被调用preUpdate()，第三次draw被调用xPos = 907等等。

您希望{<1}}，draw，xPos = 1804和xPos都在 geel内定义，以便每次重置时间。这是fiddle。