如何为HTML5 canvas注册onkeydown事件

Question

我想写一个用HTML5 <canvas> element的蛇游戏演示。我试图注册Keyboard(onkeydown)事件，但它不起作用。

代码：

   canvas.onkeydown = divertDirection; //don't work
   //canvas.addEventListener("keydown", divertDirection, false);  //don't work

   //根据键盘来调振蛇移动的方向
   function divertDirection(ev) {
        console.log(ev);
    }

    //register this event for widnow
   window.addEventListener("keydown", divertDirection, false); //ok

Answer 1

正如jing3142所说，您不能监听不是为它们设计的元素上的键盘事件。

但是，您可以强制为它们设计图元。

canvas.tabIndex = 1000;

现在您可以将canvas.addEventListener与键盘事件一起使用。

这比window.addEventListener更可取，因为这样就不会干扰页面上的任何其他元素，比如实际的输入元素。

请注意，当画布具有焦点时，您可能会在某些浏览器中看到虚线轮廓。要删除此文件，请执行以下操作：

canvas.style.outline = "none";

玩得开心!

Answer 2

如果HTML元素不是为文本输入而设计的，那么您就不能为它设置keydown事件。

正如您所做的使用

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

然后使用divertDirection函数更改蛇对象的方向。如果您有多条蛇，则对每条蛇使用不同的关键点。