为什么我不能翻译JS Canvas图像？

Question

我知道您可以使用ctx.translate()翻译图像，但是当我这样做时，它不起作用。我不知道出了什么问题。我花了2个小时试图搞清楚。这是我的代码：

<canvas id="tank_layer" height="1080" width="1920"></canvas>

var canvas = document.getElementById('tank_layer'),
    ctx = canvas.getContext('2d')

document.onkeydown=function(){

  ctx.translate(100,150)
}
img = new Image(1920, 1080),
img.src="../tanks/maps/2.png"

img.onload = function() {
  ctx.drawImage(img, 0, 0);
}

Answer 1

您需要在翻译后重新绘制图像，因此请添加以下内容：

document.onkeydown=function(){ 
    ctx.translate(100,150) 
    ctx.drawImage(img,0,0)
}

<强>主意

var counter=0;

document.onkeydown=function(){ 
    if (counter===0) {
        ctx.translate(100,150);
        ctx.drawImage(img,0,0);
        counter++;
    }
}