带有setInterval的javascript Canvas动画

Question

我的代码有问题，它不工作，我没有发现错误，我认为错误是因为有很多嵌套，我在错误的地方设置了括号。 代码中的函数是一个动画，动画中是 Canvas 顶部的一些图像，这些图像应该像瀑布一样从上到下慢慢地出现。我希望你能理解我的解释。

console.log("hey");
            var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d'); //ctx = contex
                var img = new Image();
                img.src="../img/cookie.png";

            canvas.width = canvas.scrollWidth;
            canvas.height = canvas.scrollHeight;


img.onload = function() {
                console.log("Loaded image")
                var add = 10;
                var id  = setInterval(function () {

                        if (add == 500) {

                                    ctx.clearRect(0, 0, canvas.width, canvas.height)

                                    ctx.beginPath();
                                    ctx.rect(0, 0, 1000, 1000);
                                    ctx.fillStyle = "lightblue";
                                    ctx.fill();

                                    ctx.drawImage(img,0 , 0, 100, 100);
                                    ctx.drawImage(img,100,0, 100, 100);
                                    ctx.drawImage(img,200,0, 100, 100);
                                    ctx.drawImage(img,300,0, 100, 100);
                                    ctx.drawImage(img,400,0, 100, 100);
                                    ctx.drawImage(img,500,0, 100, 100);
                                    ctx.drawImage(img,600,0, 100, 100);
                                    ctx.drawImage(img,700,0, 100, 100);

        } else {

                ctx.clearRect(0, 0, canvas.width, canvas.height)

                ctx.beginPath();
                ctx.rect(0, 0, 1000, 1000);
                ctx.fillStyle = "lightblue";
                ctx.fill();

                ctx.drawImage(img,0 , add, 100, 100);
                ctx.drawImage(img,100,add, 100, 100);
                ctx.drawImage(img,200,add, 100, 100);
                ctx.drawImage(img,300,add, 100, 100);
                ctx.drawImage(img,400,add, 100, 100);
                ctx.drawImage(img,500,add, 100, 100);
                ctx.drawImage(img,600,add, 100, 100);
                ctx.drawImage(img,700,add, 100, 100);

                add++;
            }
        }, 10)
  }

PS:抱歉，如果我的文章中有一些错误，但我还是学生。 :D

PPS:感谢您的帮助。

编辑: 现在可以使用了，感谢您的帮助。 **EDit2:**现在我有一个问题，代码只会执行一次，但如果有人能帮助我，它应该会一直执行，我很笨。

Answer 1

我认为您所有的括号都在正确的位置。我看到的最大错误是您的 if 语句说 if (add = 1000) 使用单个 = 而不是双 ==。这意味着您在 if 语句中将 add 设置为 1000 而不是对其进行比较。

编辑:您遇到的另一个问题是您的图像 src 是在其 onload 中定义的，这实际上没有意义，因为 onload 等待加载 src。

我在这里创建了一个 jsfiddle，你的代码可以工作，检查一下:https://jsfiddle.net/pjkmwvp6/