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

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