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

我认为代码中有atypo。您正在变量画布中存储对画布的引用，但是您在使用myCanvas

的任何位置

Answer 2

它对我来说非常合适。我在jsfiddle中测试它并且在画布具有焦点时完美地工作。

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

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

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

Answer 3

焦点

我在@Spedwards jsfiddle中尝试了你的例子，一旦我点击了canvas元素，它就起作用了，所以@Spedwards指出，具有焦点的画布至关重要。

您可能会尝试将键事件处理程序附加到某个父元素，例如文档窗口本身，如果你想让它工作而不首先将焦点放在画布上。

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

Canvas元素的两个引用

我从你的问题中学到了@Spedwards这个有趣的浏览器行为，我以前没有意识到（或者在此期间忘记了它： - ）

14.7文档元素作为窗口属性

如果使用id属性在HTML文档中命名元素，并且如果使用   Window对象还没有该名称的属性，Window对象是   给出一个不可数的属性，其名称是id属性的值，其属性   value是表示该文档元素的HTMLElement对象。

[..]所以这意味着您使用的id属性   您的HTML文档成为脚本可访问的全局变量

（来自JavaScript：The Definitive Guide，第六版David Flanagan）

它解释了为什么你的东西可以工作。

正如@Acyut指出的那样，你使用了两个JavaScript变量：“myCanvas”（由你的带有id属性的Canvas HTML元素的HTML声明引用，如引言中所述）和“canvas”变量，这是一个参考到同一个画布。

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

Answer 4

您需要做的是：

JQ： $(document).ready(function(){ function cool(){ $("div").animate({left:'500px'}); } ]);

我认为这是怎么做的。

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

4 个答案:

焦点

Canvas元素的两个引用