1

这是我的代码，我想用四个箭头键盘移动图片（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>
4

2 回答 2

1

只有可以接收焦点的元素（例如表单输入）才会生成键事件。你有两个选择：

  • 向您的元素添加一个tabindex属性以<canvas>使其获得焦点。的值0会将元素放置在默认的 Tab 键顺序（即 HTML 源代码顺序）中。这是更详细的文章。
  • document改为处理关键事件。这样做的缺点是捕获源自文档中任何位置的关键事件，而不仅仅是<canvas>您感兴趣的元素。
于 2012-12-10T14:46:13.390 回答
-2

将keydown更改为：

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

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

于 2012-12-10T14:41:10.523 回答