将键盘事件附加到 html5 canvas

发布于 2024-12-07 13:54:16 字数 332 浏览 1 评论 0原文

看起来鼠标事件可以很好地向canvas元素添加监听器，但是键盘事件似乎不适用于canvas< /code> 元素。

例子： http://jsfiddle.net/H8Ese/1/

浏览器：铬14.0 FF 5.0.1

我知道我可以使用文档级侦听器，但我试图首先获取 Canvas 元素（以便您的键盘可以在页面上的其他任何地方使用）。

关于如何在画布元素上监听关键事件有什么想法吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小兔几 2024-12-14 13:54:16

我认为您不能将键盘事件监听器直接添加到画布上。如果您不想在窗口级别注册事件处理程序，那么我认为您可以将画布包装在 div 内并在 div 上注册键盘事件。

<div id="canvasWrapper" style="border:1px solid;   width:600px; height:400px;">
        <canvas id="canvas" width="600" height="400" >
            Could not create Canvas!
        </canvas>
</div>

jQuery("#canvasWrapper").keypress(function(e){
keys[e.keyCode] = true;
alert("key pressed!");
});

另一个有趣的方法是在画布标签上使用 tabIndex 并在画布上绑定按键。我已经更新了 jsfiddle 的代码，也粘贴到此处以供将来参考。

<canvas id="my-canvas" tabindex="1"></canvas>


$("#my-canvas").bind({
keydown: function(e) {
    var key = e.keyCode;
   var elem=document.getElementById("my-canvas");

    var context=elem.getContext("2d");
    context.font = "bold 20px sans-serif";
    context.clearRect(0,0,300,200);
    context.fillText("key pressed " + key, 10,29);

},

focusin: function(e) {
    $(e.currentTarget).addClass("selected");
},

focusout: function(e) {
    $(e.currentTarget).removeClass("selected");
}
});
$("#my-canvas").focus();

I don't think you can add keyboard event listener directly to the canvas. If you don't want to register event handler on window level then I think you can wrap the canvas inside a div and register keyboard events on the div.

<div id="canvasWrapper" style="border:1px solid;   width:600px; height:400px;">
        <canvas id="canvas" width="600" height="400" >
            Could not create Canvas!
        </canvas>
</div>

jQuery("#canvasWrapper").keypress(function(e){
keys[e.keyCode] = true;
alert("key pressed!");
});

Another interesting way is to use tabIndex on the canvas tag and bind keypress on the canvas. I have updated the code at jsfiddle, pasting here too for future references.

<canvas id="my-canvas" tabindex="1"></canvas>


$("#my-canvas").bind({
keydown: function(e) {
    var key = e.keyCode;
   var elem=document.getElementById("my-canvas");

    var context=elem.getContext("2d");
    context.font = "bold 20px sans-serif";
    context.clearRect(0,0,300,200);
    context.fillText("key pressed " + key, 10,29);

},

focusin: function(e) {
    $(e.currentTarget).addClass("selected");
},

focusout: function(e) {
    $(e.currentTarget).removeClass("selected");
}
});
$("#my-canvas").focus();

回复收藏 0 原文

~没有更多了~