Javascript 清除画布后不绘制图像

我想清除画布，然后在x轴上重新绘制-30像素。当我运行它时，画布会清除，但不会重新绘制画布。当我在没有“clearRect”的情况下运行它时，put只是在当前图像上绘制图像。有人知道问题出在哪里吗？提前谢谢

ctx.save();
ctx.clearRect(0, 0, 480, 400);
ctx.translate(-30, 0);
ctx.drawImage(mycanvasvariable, 0, 0);
ctx.restore();

演示：

问题：每次平移到相同的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);
}

---

我运行的函数是在按键上的，因此如何将该函数实现到按键一中，您知道>确定吗？（1）侦听键盘事件：document.addEventListener（“keydown”，handleKeydown，false）；（2） 处理键盘事件并响应相应的按键代码：函数handleKeydown（e）{var key=e.keyCode；if（key==39）{//move right}否则if（key==37）{//move left}；}我知道如何测试按键，谢谢，我不知道如何合并你的函数和我的函数。欢迎！你可以减少offsetX以回应左键，增加offsetX以回应右键。哦，是的，太好了，非常感谢