キーコードでキャンバスを移動する - JAVASCRIPT

Question

私は非常にjavascriptを使っています。 Googleの助けを借りて私はこれを書いた。なぜか分からないけど、キー「A」か「D」のどちらかを押すと何も起こりません。私はなぜそれが完全な意味を持つのか、私には分かりません。手伝って頂けますか？

canvas = document.getElementById("canvas"); 
ctx = canvas.getContext('2d'); 
var X = 50; 
var Y = 50; 
var WIDTH = 35; 
var HEIGHT = 35; 
ctx.fillStyle = "#FF0000"; 
ctx.fillRect(X,Y,WIDTH,HEIGHT); 
document.addEventListener("keydown", draw); 
function draw(e){ 
    switch(e.which || e.keyCode){ 
     case 68: 
      x += 5; 
      break; 
     case 65: 
      x -= 5; 
      break; 
    } 
    ctx.clear(); 
    ctx.fillStyle = "#FF0000"; 
    ctx.fillRect(X,Y,WIDTH,HEIGHT); 
} 

とHTML：

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

それは場合に役立ちます。ここフィドルです。 https://jsfiddle.net/Scrubben/gmd537k1/26/

Answer 1

ここに作業コードがあります。 JavaScriptが大文字と小文字を区別していることを確認だからvar X !== x。 、非常に良い代わりにctx.clear()

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext('2d'); 
 
var x = 50; 
 
var y = 50; 
 
var WIDTH = 35; 
 
var HEIGHT = 35; 
 
ctx.fillStyle = "#FF0000"; 
 
ctx.fillRect(x, y, WIDTH, HEIGHT); 
 
document.addEventListener("keydown", draw); 
 

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

#canvas { 
 
    border: 2px solid black; 
 
}

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