爲什麼我不能翻譯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++; 
    } 
}