清除畫布后不繪制圖像

Question

我想清除畫布，然后在x軸上重新繪制-30像素。 當我運行它時，畫布會清除，但不會重新繪制畫布。 當我在沒有“ clearRect”的情況下運行它時，它的工作原理只是在當前圖像上繪制圖像。 有人知道是什么問題嗎？ 提前致謝

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

Answer 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);
}