javascript - 为什么键盘监听器不起作用

Question

这是我的代码，我想用四个箭头键盘移动图片(pic1)，画一些线作为背景区域，图片一次移动1s，但是我遇到了一个问题，我不能移动pic1,谁能告诉我为什么不行

<script type="text/javascript">
    var canvas = document.getElementById("painting");
    //canvas.addEventListener("keydown", doKeyDown, true);
    var context2D = canvas.getContext("2d");
    var pic = new Image();
    var pic1=new Image();
    var X=0,Y=200;
    var X1=200,Y1=200;
    pic.src = "music.jpg";
    pic1.src = "qingwa.jpg";

    function drawline()
    {
    context2D.moveTo(0,100);
    context2D.lineTo(35,100);
    context2D.lineTo(35,60);
    context2D.lineTo(85,60);
    context2D.lineTo(85,100);
    context2D.lineTo(155,100);
    context2D.lineTo(155,60);
    context2D.lineTo(205,60);
    context2D.lineTo(205,100);
    context2D.lineTo(275,100);
    context2D.lineTo(275,60);
    context2D.lineTo(325,60);
    context2D.lineTo(325,100);
    context2D.lineTo(395,100);
    context2D.lineTo(395,60);
    context2D.lineTo(445,60);
    context2D.lineTo(445,100);
    context2D.lineTo(515,100);
    context2D.lineTo(515,60);
    context2D.lineTo(565,60);
    context2D.lineTo(565,100);
    context2D.lineTo(600,100);


    context2D.stroke();
    }
    function doKeyDown(e)
    {
        switch (e.keyCode)
        {
        // the up key
            case 38:
            Y1 = Y1 - 10;
            break;
        //the down key
            case 40:
            Y1 = Y1 + 10;
            break;

        //the left key
            case 37:
            X1 = X1 - 10;
            break;

        //the right key
            case 39:
            X1 = X1 + 10;
            break;

        }
    }

    function drawfrogger()
    {

        context2D.drawImage(pic1,X1,Y1);
    }
    function draw()
    {

        context2D.clearRect(0,0,600,600);
        context2D.save();
        context2D.drawImage(pic,X,Y);
        drawfrogger();
        drawline();
        context2D.restore(); //绘制结束以后，恢复画笔状态
        if(X>600)
            X = 0;
        X = X + 100;

    }


    setInterval(draw, 1000);

</script> 

Answer 1

只有能够获得焦点的元素，比如表单输入，才会产生按键事件。您有两个选择:

• 添加 tabindex属性给你的 <canvas>元素以使其获得焦点。值为 0将按默认的 Tab 键顺序(即 HTML 源代码顺序)放置元素。 Here is article with some more detail .
• 处理 document 上的关键事件反而。这样做的缺点是捕获了文档中任何地方产生的关键事件，而不仅仅是 <canvas>。您感兴趣的元素。