javascript - 在 HTML5 画布中创建关键事件的最佳方式是什么？

Question

请建议为 HTML5 画布创建关键事件的最佳方法。我不喜欢任何图书馆，但如果你认为这是最好的方法，那就去回答吧。提前致谢！

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.");
}

或者，如果您有一长串要使用的键，请在开关盒中进行：

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
    }
}

Answer 2

如果要在<canvas>自身（而不是windowor ）上设置关键事件处理，请在元素document上设置 tabindex 。<canvas>请注意，画布需要聚焦才能捕捉关键事件。

<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。

Answer 3

我正在编写一个 Canvas 游戏，我使用默认值.addEventListener并通过event.keyCode它附带的 s 进行切换。此外，我不侦听 Canvas 元素本身的关键事件，而只是将侦听器设置为窗口。

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