尝试使用键盘javascript移动画布

Question

我知道已经有很多问题被问到了，但它并不能回答为什么我的代码不起作用。我只是无法理解它。这是我的代码，当我按下a或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);
}

一些浏览器使用which，另一些使用keyCode，这就是为什么我们要查找which，如果是错误的，还要查找keyCode。