爲什麼鍵盤聽者不工作

這是我的代碼，我想用四個箭頭鍵盤移動圖片（圖片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

我不明白？ –

爲什麼鍵盤聽者不工作

回答

相關問題