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

Question

这是我的代码，我想用四个箭头键盘移动picture（pic1），画一些线作为背景区域，pic一次移动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

只有可以获得焦点的元素（例如表单输入）才会生成键事件。 您有两种选择：

• 在您的<canvas>元素中添加一个tabindex属性，以使其获得焦点。 值为0将按默认制表符顺序（即HTML源代码顺序）放置元素。 这是更详细的文章 。
• 而是处理document上的关键事件。 这样做的缺点是无法捕获起源于文档中任何地方的关键事件，而不仅仅是您感兴趣的<canvas>元素。

Answer 2

将keydown更改为：

document.addEventListener("keydown", function(e) {
    doKeyDown(e);
});

@jbabey-可行： http ： //jsfiddle.net/neuroflux/cjRVn/3/