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。

试图用键盘-javascript制作画布

1 个答案: