在JavaScript（画布）中动画for循环

Question

我做了一个for循环，绘制了40个矩形，它们都需要有高度：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

问题是第二次draw被称为xPos = 907 ，第三次draw被称为xPos = 1804 ， xPos = 1804 。

你想xPos ， geel ， blauw和groen所有被内部定义的draw让他们每次都重设。 这是一个小提琴 。