動畫循環與畫布不工作

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>

^{道歉沒有給解釋}

ʜᴀᴠᴇꜰᴜɴ:)