Javascript 当按下一个键时，尝试在画布中移动一个矩形，但它不起作用

当按下W/A/S/D时，矩形将“移动”。但是什么也没发生，我不确定为什么。我试着用一个不同的名字来称呼“e”，当然没有什么区别。我一直在寻找拼写错误。不走运。

我想你的代码中有atypo。您正在变量canvas中存储对画布的引用，但是无论您在哪里使用myCanvas，它都非常适合我。我在JSFIDLE中测试了它，当画布具有焦点时，它可以完美地工作

在重新绘制矩形之前，请记住使用

clearCanvas（）

函数

---

编辑：更新了我的JSFIDLE，以便画布立即获得焦点。还添加了箭头键支持。

您需要做的是：

jQ:

$（文档）.ready（函数（）{
函数cool（）{
$（“div”）.animate（{左：'500px'}）；
}
])；

我想这就是如何做到的。

Focus 我在@Spedwards jsfiddle中尝试了您的示例，在单击canvas元素后，它就工作了，因此@Spedwards指出，画布具有焦点是至关重要的

如果您想让键事件处理程序在不首先关注画布的情况下工作，可以尝试将其附加到某个父元素，例如文档窗口本身

$(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);
  }

});

Canvas元素的两个引用 我从你的问题中学到了@Spedwards这个有趣的浏览器行为，这是我以前没有意识到的（或者同时忘记了：-）

14.7文档元素作为窗口属性

如果使用id属性命名HTML文档中的元素，并且 窗口对象没有该名称的属性，窗口对象为 给定一个名称为id属性值且 值是表示该文档元素的HtmleElement对象

[…]这意味着您在 HTML文档成为脚本可访问的全局变量

（摘自《JavaScript：权威指南》，大卫·弗拉纳根第六版）

这解释了为什么你的东西能用

正如@Acyut所指出的，您使用了两个JavaScript变量：“myCanvas”（通过引用中解释的带有id属性的Canvas HTML元素的HTML声明而变得生动）和“Canvas”变量，它是对同一画布的引用

---

我建议您坚持在代码中引用实例的一种方式，这是更好的样式。

您是否尝试过在画布上设置tabindex-例如

，或者将事件侦听器绑定到

文档.body

@mvw画布是用HTML创建的。

。不需要Javascript来实例化它。我忘记了tabindex="0"在我的canvas标记中。它现在可以使用。myCanvas是html中的的的id。我应该为canvas变量和canvas标记id使用相同的名称吗？不是这样做的。我们使用的是canvas，您刚刚发布的示例移动了一个div元素。很高兴我可以帮助您实现这一点。我实际上不知道canvas必须是foc也用过。我试过了，没用，不小心点击了画布使它聚焦，它神奇地工作了！

window.addEventListener("keydown", doKeyDown, false);