html5-canvas - 如何为HTML5 canvas注册onkeydown事件

Question

我想用HTML5 <canvas>元素编写一个蛇游戏演示。我试图注册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 具有焦点时，您可能会在某些浏览器中看到虚线轮廓。要删除此内容:

canvas.style.outline = "none";

玩得开心!