看起来像mouse events
将添加听众canvas
元素很好,但是keyboard events
似乎不适合canvas
元素。
例子:http://jsfiddle.net/H8Ese/1/
浏览器:
铬14.0
FF 5.0.1
我知道我可以使用文档级侦听器,但我试图首先获取 Canvas 元素(以便您的键盘可以在页面上的其他任何地方使用)。
关于如何在画布元素上监听关键事件有什么想法吗?
我认为您不能将键盘事件监听器直接添加到画布上。如果您不想在窗口级别注册事件处理程序,那么我认为您可以将画布包装在 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();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)