HTML5画布中创建关键事件的最佳方法是什么？

Question

请提供创建HTML5画布的关键事件的最佳方式。我不喜欢任何库，但如果您认为这是最好的方法，请回答。谢谢！

- user1441816

---

你只想在按下某个键（比如“W”）时执行特定的函数吗？ - Rhyono

在我的Visual-JS游戏引擎中，我实现了基于对象的Canvas事件。Canvas应用程序的虚拟键盘在哪里：http://jsfiddle.net/zlatnaspirala/0u5j1ap8/ - Nikola Lukic

你应该重新命名这个问题。看起来你想要创建的不是事件，而是一个基于事件触发操作的EventHandler（所有回答都隐含地描述为由用户通过键盘生成的事件）。 - tnarik

Answer 1

这将返回键码：

<canvas id="myCanvas" width="200" height="100" style="background:green"></canvas>
<script type="text/javascript">
window.addEventListener('keydown',this.check,false);

function check(e) {
    alert(e.keyCode);
}
</script>

如果您想演示基于关键字完成不同任务的效果：

function check(e) {
    var code = e.keyCode;
    //Up arrow pressed
    if (code == 38)
        alert("You pressed the Up arrow key");
    else
        alert("You pressed some other key I don't really care about.");
}

如果您有一长串需要使用的键，可以使用switch case语句：

function check(e) {
    var code = e.keyCode;
    switch (code) {
        case 37: alert("Left"); break; //Left key
        case 38: alert("Up"); break; //Up key
        case 39: alert("Right"); break; //Right key
        case 40: alert("Down"); break; //Down key
        default: alert(code); //Everything else
    }
}

- Rhyono

---

谢谢。你能绑定一个按键吗？比如向上箭头。抱歉，这是新手问题。 - user1441816

只监听那个键吗？很遗憾，不行。你能做的最好的事情是检查它的键码，如果键码匹配38：就做任何事情，如果不匹配：什么也不做。 - Rhyono

只是想评论一下，如果您有多个画布，您将需要将事件绑定到特定的画布。在画布元素上设置tabindex允许它在聚焦时接受按键事件。 - Brian Duncan

只是注意通常最好使用keyup而不是keydown - 更稳定。 - John White

这不是正确的答案，问题是画布而不是窗口。 - Mark Homer

Answer 2

如果您想在<canvas>本身上设置键事件处理（而不是window或document），请在<canvas>元素上设置tabindex属性。请注意，画布需要处于焦点状态才能捕获键事件。

<script>
    document.getElementById('game').addEventListener('keypress', handleKeyPress);
    function handleKeyPress(e) { ... }
</script>
<canvas id="game" tabindex="1" width="350" height="200">
</canvas>

这就是在Processing.js网站上的操作方式。

如果您不想在单击画布时出现边框，请将其样式设置为outline: none。

- Brian Duncan

---

你如何设置选项卡索引？ - ncmathsadist

@ncmathsadist，通过“set”我指的是，在canvas标签中添加HTML属性“tabindex”，并为其赋一个整数值。Tabindexes本身不在本问题的范围之内：https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex - Brian Duncan

"keypress event"已被弃用。 - Pavlo Mezhevikin

Answer 3

我正在编写一个Canvas游戏，使用默认的.addEventListener并通过event.keyCode进行事件处理。此外，我没有在Canvas元素本身上监听键盘事件，而是将监听器设置在窗口上。

window.addEventListener('keyup',keyUpListener,false);
window.addEventListener('keydown',keyDownListener,false); 

- Polyov

---

你能用向上箭头（38）触发一个警报吗？谢谢。 - user1441816

与窗口事件一起工作是个好主意吗？如果有人想在你的游戏之外但在同一个窗口内做些其他事情，比如写评论，那该怎么办呢？ - erikbstack

在这种情况下，您可能需要在用户聚焦于输入区域时禁用事件监听器。 - Polyov

这是问题的核心。只有窗口可以“听到”键事件。然而，它的监听器可以改变页面内元素的状态。 - ncmathsadist