为什么键盘听者不工作

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

来源

2012-12-10 user1123849

增加了工作的jsfiddle ... –

只有可以获得焦点的元素，例如m个输入将生成关键事件。你有两个选择：

添加tabindex属性您<canvas>元素，使其能够接收焦点。值0将以默认标签顺序（即HTML源顺序）放置该元素。 Here is article with some more detail。
改为在document上处理关键事件。这有捕捉关键事件的缺点，即在文件中的任何地方发起，而不仅仅是<canvas>元素你感兴趣的内容。

来源

2012-12-10 14:46:13

嗨，你可以给我的代码，因为你解释上面，非常感谢^^ – user1123849

@ user1123849：http://jsfiddle.net/vMgnF/1/ –

嗨，这是我的另一个问题。我如何只发布文本在stackoverflow.i刚刚完成，但它说我不符合格式 – user1123849

-2

更改的keydown到：

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

@jbabey - 这个工程：http://jsfiddle.net/neuroflux/cjRVn/3/

来源

2012-12-10 14:41:10

您好，这里是我的另一个question.How我可以只发布在stackoverflow.i中的文本刚刚做过，但它说我不符合格式 – user1123849

我不明白？ –

为什么键盘听者不工作

回答

相关问题