动画循环与画布不工作

Question

我想要一个循环，相同的动画alwys come.But它不工作，如果somenone可以帮助我，我会很高兴。 现在细节让动画运行一次，而不是停止。但动画应该在第一次运行之后再运行一次，之后再运行一次，等等。

console.log("Start"); 
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; 

console.log("Loaded image"); 
var add = 10; 

onload = function Hallo() { 
    if (add == 500) { 
     console.log("resetet") 

     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 { 
     console.log("Animation beginnt") 

     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++; 
     window.requestAnimationFrame(Hallo); 
    } 
} 
window.requestAnimationFrame(Hallo); 

Answer 1

这么多的问题与您的代码。这里是如何应该做的......

console.log("Start"); 
 
var canvas = document.getElementById('canvas'); 
 
var ctx = canvas.getContext('2d'); //ctx = contex 
 

 
canvas.width = canvas.scrollWidth; 
 
canvas.height = canvas.scrollHeight; 
 
var add = 10; 
 

 
var img = new Image(); 
 

 
img.onload = function() { 
 
    console.log("Loaded image"); 
 
    Hallo(); 
 
}; 
 

 
img.src = "http://lorempixel.com/100/100"; 
 

 
function Hallo() { 
 
    if (add == 500) { 
 

 
     add = 10; // need to reset add's value 
 

 
     console.log("resetet"); 
 

 
     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 { 
 
     console.log("Animation begining"); 
 

 
     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++; 
 
    } 
 

 
    requestAnimationFrame(Hallo); // need to call this here 
 
}

<canvas id="canvas" width="800" height="600"></canvas>

^{道歉没有给解释}

ʜᴀᴠᴇꜰᴜɴ:)