按下按鈕後圖像不斷閃爍？

Question

當我持續按下按鈕時，圖像閃爍。問題可能在ctx.clearRect(0,0,100,500)。我該如何解決這個問題？

我想在HTML 5畫布中動畫。 我需要在畫布中移動的物體，當我按下按鈕時，另一個移動物體按照前一個沒有閃爍。

function draw(x,y){ 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    ctx.save(); 
    ctx.clearRect(0,0,100,500); // This may be the problem 
    var img=document.getElementById("Image"); 
    ctx.drawImage(img,50,y); 
    ctx.restore(); 
    y -= 10; 
    var loopTimer = setTimeout('draw('+x+','+y+')',50); 
} 

HTML 5

<button onclick="draw(0,500)">Draw</button> 
<canvas id="canvas" width="600" height="500"> 
</canvas> 

Answer 1

它看起來像這個問題可能是因爲你沒有清除整個canvas。試試這個：

function draw(x,y){ 
    var canvas = document.getElementById("canvas"); 
    var ctx = canvas.getContext("2d"); 
    ctx.save(); 
    ctx.clearRect(0,0, canvas.width, canvas.height); 
    var img=document.getElementById("Image"); 
    ctx.drawImage(img,50,y); 
    ctx.restore(); 
    y -= 10; 
    var loopTimer = setTimeout('draw('+x+','+y+')',50); 
} 

Demo

Answer 2

，當你按下按鈕一次以上，這意味着你開始的setTimeout（圖像閃爍）一次以上。添加一個變量來檢查它是否已被按下。