javascript Canvas Animation with setInterval

Question

我的代码中有一个问题，它不起作用，我没有找到失误，我认为失误是因为许多嵌套和我在错误的地方设置了一个括号。代码中的函数是动画中的动画是画布顶部的一些图像，而不是应该像瓦特瀑布一样从顶部慢慢地从顶部到底部。

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：**现在我有一个其他问题，代码只会执行一次，但如果有人可以帮助我，它应该超过全职，我非常 danbar。

Answer 1

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

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

我在这里做了一个jsfiddle，你的代码在哪里工作，看看它：https://jsfiddle.net/pjkmwvp6/

Answer 2

你能尝试改变这个吗???

// Change this
if(add = 1000){
// To this
if(add === 1000){

Answer 3

为了解决您对括号的任何疑问，许多编辑器和 Web 服务可以为您执行代码美化(又名漂亮打印(。给它一个谷歌。此外，Firefox 中还有一个这样的工具内置了 Shift+F4"slate"，只需将您的代码粘贴其中并按 Ctrl+P 即可。

我认为您没有以正确的方式加载图像。请注意，设置图像的src属性是实际触发其加载的原因。按原样，代码无法加载图像，因为设置src的指令位于onload处理程序内。把它放在后面。

处理动画时，setInterval不是最适合的功能。首选请求动画帧。它的语法非常接近，并且具有节省 CPU 的功能。