使用setInterval來回移動畫布圖像

Question

我試圖在畫布中使用setInterval來回移動圖像。我一直在努力尋找解決方案無濟於事。任何人都可以找出問題嗎？ 這裏是我的代碼：

...

var img = new Image; 
var url = ["sprite-right.png","sprite-left.png"]; 
var ctx2; 

for (i=0; i<3; i++) { 
    img.src = url[i]; 
} 

img.onload = function() { 
    start(); 
} 

function start() { 
    var canv2 = document.getElementById("canvas2"); 
    ctx2 = canv2.getContext("2d"); 
    var x = 50, y = 100; 
    var direction = "right"; 
    var interval = setInterval(function() { 
    if (direction == "right") { 
     img.src=url[0]; 
     ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height); 
     ctx2.drawImage(img, x, y); 
     x++; 
     if (x>690) { 
      direction = "left"; 
      } // end if 
    } else if (direction == "left") { 
     img.src=url[1]; 
     ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height); 
     ctx2.drawImage(img, x, y); 
     x--; 
     if (x<50) { 
      direction = "right"; 
      } // end if 
     } // end if 
     },1); // end set interval 
} // end function 

Answer 1

你的代碼是無限循環。

(Working plunkr)

每當你的圖像加載，運行 '開始' 功能;然而，該功能改變了圖像url，所以它再次加載，運行'開始'功能等。

我通過製作多個圖像而不是僅使用一個來運行代碼;這樣，圖像不會不斷重新加載。

值得注意的變化是增加了'img2'變量並重新排序代碼;其他的一切都很好。

var img = new Image(), 
img2 = new Image(); 
var url = ["https://www.google.com/images/srpr/logo11w.png","http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/220px-Smiley.svg.png"]; 
var ctx2; 

function start() { 
    console.log('whirrr'); 
    var canv2 = document.getElementById("canvas2"); 
    ctx2 = canv2.getContext("2d"); 
    var x = 50, y = 100; 
    var direction = "right"; 
    var interval = setInterval(function() { 
    if (direction == "right") { 
     //img.src=url[0]; 
     ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height); 
     ctx2.drawImage(img, x, y); 
     x++; 
     if (x>690) { 
      direction = "left"; 
      } // end if 
    } else if (direction == "left") { 
     //img.src=url[1]; 
     ctx2.clearRect(0, 0, ctx2.canvas.width, ctx2.canvas.height); 
     ctx2.drawImage(img2, x, y); 
     x--; 
     if (x<50) { 
      direction = "right"; 
      } // end if 
     } // end if 
     },1); // end set interval 
} // end function 

img.onload = function() { 
    start(); 
} 

//for (i=0; i<3; i++) { 
// img.src = url[i]; 
//} 
img.src = url[0]; 
img2.src = url[1];