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