按下按钮时图像一直闪烁？答案

【问题标题】：Image is flickering continuously in pressing button?按下按钮时图像一直闪烁？
【发布时间】：2013-05-13 02:54:31
【问题描述】：

当我不断按下按钮时，图像闪烁。问题可能出在 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>

【问题讨论】：

Chrome 中似乎没有出现这种闪烁。您在使用哪个浏览器时遇到问题？
你能把它放在一个 jsfiddle 中，这样我们就可以看到你所看到的了。

标签： javascript html html5-canvas html5-animation

【解决方案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

【讨论】：

【解决方案2】：

当您多次按下按钮时，图像会闪烁，这意味着您多次启动 setTimeout()。添加一个变量来检查它是否已经被按下。

【讨论】：