onkeydown事件不在画布上工作?

时间:2015-10-04 18:32:27

标签: javascript canvas event-handling keycode onkeydown

我有一个画布和一个onkeydown事件。当按下任何键时,控制台应该记录密钥的keyCode。但它没有输出任何东西,甚至不是undefined。像onclick这样的其他处理程序工作正常,但onkeydown不是。我也尝试过使用onkeypressonkeyup,但这些也不起作用。这是完整的代码:

canvas.onkeydown = function(e){
    if(e.keyCode === 37){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(knife,knifeX - 10, knifeY);
        knifeX -= 10;
    }
    else if(e.keyCode === 39){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(knife,knifeX + 10, knifeY);
        knifeX += 10;           
    }
    else if(e.keyCode === 38){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(knife,knifeX, knifeY + 10);
        knifeY += 10;
    }
    else if(e.keyCode === 40){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.drawImage(knife,knifeX, knifeY - 10);
        knifeY -= 10;               
    }
    console.log(e.keyCode);     
}

1 个答案:

答案 0 :(得分:1)

相反,如果使用canvas.onkeydown使用window.onkeydown,则需要专注于画布以使其正常工作。

window.onkeydown = function() {};

只有专注于该元素,才能附加到canvas元素。窗口对象是整个浏览器。