キーボードでキャンバスを動かしようとしています-javascript

Question

これについて多くの質問がありますが、私のコードがうまくいかない理由は答えられません。私はちょうどそれの周りに私の頭を包むことはできません。私のコードはここにあります。またはdのキーを押しても何も起こりません。

canvas = document.getElementById("canvas"); 
ctx = canvas.getContext('2d'); 
var x = 40; 
var y = 40; 
var WIDTH = 40; 
var HEIGHT = 40; 
var keycode = event.keyCode; 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(x,y,WIDTH,HEIGHT); 
document.addEventListener("keydown", draw); 
function draw(){ 
    switch(keycode){ 
    case 68: 
     x += 5; 
     break; 
    case 65: 
     x -= 5; 
     break; 
    } 
    ctx.clear(); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fillRect(x,y,WIDTH,HEIGHT); 
} 

<canvas id="canvas" width="500px" height="500px"></canvas> 

Answer 1

あなたは早すぎると間違った場所から変数にevent.keyCodeをつかみました。代わりに

、あなたのdraw関数内で引数を受け入れ、直接その上which財産（そことtruthy場合）またはkeyCodeプロパティを使用します。

function draw(e){ 
// Arg -------^ 
    switch(e.which || e.keyCode){ 
// Key ----^^^^^^^^^^^^^^^^^^^^ 
     case 68: 
      x += 5; 
      break; 
     case 65: 
      x -= 5; 
      break; 
    } 
    ctx.clear(); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fillRect(x,y,WIDTH,HEIGHT); 
} 

一部のブラウザである、他の人がkeyCodeを使用し、whichを使用なぜ我々はwhichを探し、それが偽であればkeyCodeを探します。