javascript - 尝试在按下按键时使矩形在 Canvas 中移动，但它不起作用

Question

$(document).ready(function() {
  var canvas = document.getElementById('myCanvas');
  canvas.addEventListener("keydown", doKeyDown, false);

  var context = myCanvas.getContext("2d");
  context.fillRect(100, 100, 50, 30);

  var canvasWidth = myCanvas.width;
  var canvasHeight = myCanvas.height;

  var x = 100;
  var y = 100;

  function doKeyDown(e) {       
    switch(e.keyCode) {
    case 87:
      y = y - 10;
      context.fillRect(x, y, 50, 30);
      break;
    case 83:
      y = y + 10;
      context.fillRect(x, y, 50, 30);   
      break;
    case 65:
      x = x - 10;
      context.fillRect(x, y, 50, 30);
  break;
    case 68:
      x = x + 10;
      context.fillRect(x, y, 50, 30);       
      break;
    }
  }

  function clearCanvas() {
    context.clearRect(0, 0, canvasWidth, canvasHeight);
  }

});

应该发生的是，当按下 W/A/S/D 时，矩形将“移动”。但什么也没发生，我不确定为什么。我尝试过对“e”使用不同的名称，这当然没有什么区别。我一直在寻找拼写错误。运气不好。

Answer 1

它非常适合我。我在 jsfiddle 中对其进行了测试，当 Canvas 具有焦点时，它可以完美地工作。

http://jsfiddle.net/spedwards/c2Caj/

请记住在重绘矩形之前使用 clearCanvas() 函数。

编辑:更新了我的 jsfiddle，以便 Canvas 立即获得焦点。还添加了箭头键支持。