试图使键盘的画布移动-javascript

我知道有很多问题已经问到了这个问题，但它并没有回答为什么我的代码无法工作。我无法把头围住它。这里是我的代码，当我按a或d键时什么也没有发生。试图使键盘的画布移动-javascript

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> 

Johan Karlsson

您可以在控制台中看到'event is not defined'错误。您不在事件处理程序的范围内以使用“事件”变量。 –

回答

您正在抓取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); 
} 

一些浏览器使用which，别人用keyCode，这是为什么我们寻找which，如果它是假的，则为keyCode。

正确的。 –

Humm ....'a'有65个键码，'d'有68个键码。究竟是什么问题，@TJCrowder？ –

@MarcosPérezGude：我认为你的评论“正确的”是关于键码。我认为它不是。 :-) –

试图使键盘的画布移动-javascript