我想清除我的画布,在x轴上重绘-30像素。当我运行它时,画布清除但不重绘画布。当我在没有“clearRect”的情况下运行它时,它只是将图像绘制在当前的图像上。有谁知道这个问题是什么?提前致谢
ctx.save();
ctx.clearRect(0, 0, 480, 400);
ctx.translate(-30, 0);
ctx.drawImage(mycanvasvariable, 0, 0);
ctx.restore();
答案 0 :(得分:1)
演示:http://jsfiddle.net/m1erickson/555EH/
问题:您每次都转换为相同的x坐标(-30)。
尝试使用变量(offsetX)来改变x坐标:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var offsetX=250;
var offsetY=100;
var mycanvasvariable=new Image();
mycanvasvariable.onload=start;
mycanvasvariable.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house32x32transparent.png";
function start(){
draw(offsetX,offsetY);
}
function draw(offsetx,offsety){
ctx.save();
ctx.clearRect(0, 0, 480, 400);
ctx.translate(offsetx, offsety);
ctx.drawImage(mycanvasvariable, 0, 0);
ctx.restore();
}
document.addEventListener("keydown",handleKeydown,false);
function handleKeydown(e){
switch(e.keyCode){
case 39: offsetX+=10; break; // right arrow
case 37: offsetX-=10; break; // left arrow
case 40: offsetY+=10; break; // up arrow
case 38: offsetY-=10; break; // down arrow
}
draw(offsetX,offsetY);
}