为什么我无法翻译 JS 画布图像？

Question

我知道你可以使用ctx.translate()翻译图像，但当我这样做时，它不起作用。我不知道怎么了。我花了整整两个小时试图弄清楚。这是我的代码：

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