在JavaScript(画布)中为for循环进行动画循环

Question

我制作了一个绘制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，geel，blauw和groen都被定义为 draw，以便它们每次重置。这是小提琴。