Onkeydown事件在画布上不起作用

Question

我有一个画布和一个onkeydown事件分配给它。当任意键被按下时，控制台应该记录该键的keyCode。但是它没有输出任何东西，甚至连undefined都没有。其他处理程序如onclick工作良好，但onkeydown不是。我也尝试过使用onkeypress和onkeyup，但这些也不起作用。下面是完整的代码:

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

Answer 1

如果使用canvas.onkeydown，则使用window.onkeydown，否则您将需要关注画布以使其工作。

window.onkeydown = function() {};

附加到canvas元素上只会在你关注该元素时起作用。window对象就是整个浏览器