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

清除画布后不绘制图像

1 个答案: