Question

这是我的代码，我想用四个箭头键盘移动图片（pic1），画一些线作为背景区域，并且pic一次移动1次，但我遇到了一个问题，我无法移动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>元素。

Answer 2

将keydown更改为：

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

@jbabey - 这有效：http://jsfiddle.net/neuroflux/cjRVn/3/

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

2 个答案: