当我不断按下按钮时,图像闪烁。问题可能出在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>
答案 0 :(得分:0)
看起来问题可能是因为您没有清除整个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);
}
答案 1 :(得分:0)
多次按下按钮时图像会闪烁,这意味着您不止一次启动setTimeout()。添加一个变量以检查它是否已被按下。