使圖像在<canvas>與JavaScript鍵盤輸入移動？

我一直在試圖做一些看起來應該很簡單的事情，但我一直在打牆。我想編寫JavaScript代碼，該代碼需要在畫布標籤內部繪製圖像並通過鍵盤輸入移動它。當我按下右箭頭鍵時，我希望圖像向右移動。當我按左箭頭鍵時，我想讓圖像向左移動。我希望它繼續前進，直到我釋放密鑰爲止，對每次按下按鍵時滑動一下的東西我都不感興趣。這是我到目前爲止：使圖像在<canvas>與JavaScript鍵盤輸入移動？

<html> 
<body onload="load_image()"> 

<canvas id="myCanvas" width="320" height="240" style="border:1px solid #000000;"> 
<img id="testpic" src="testpic.png"> 
</canvas> 

<script> 
function load_image() { 
var c = document.getElementById("myCanvas"); 
var ctx = c.getContext("2d"); 
var img = document.getElementById("testpic"); 
ctx.drawImage(img,10,10);} 

document.addEventListener('keydown', function(event) { 
    if (event.keyCode == 37) { 
// CODE THAT STARTS LEFT IMAGE MOVEMENT GOES HERE. 
    } 
    else if (event.keyCode == 39) { 
// CODE THAT STARTS RIGHT IMAGE MOVEMENT GOES HERE. 
    } 
}, true); 

document.addEventListener('keyup', function(event) { 
    if (event.keyCode == 37) { 
// CODE THAT STOPS LEFT IMAGE MOVEMENT GOES HERE. 
    } 
    else if (event.keyCode == 39) { 
// CODE THAT STOPS RIGHT IMAGE MOVEMENT GOES HERE. 
    } 
}, true); 


</script> 

</body> 
</html>

我一直在嘗試從幾個網站的例子，但沒有一個工作。我能做的最好的事情是通過按鍵來反覆重繪圖像，這對我不起作用。任何提示或指導將不勝感激。如果你向我介紹工作代碼，我會愛你的！

來源

2015-07-10 Matthew

「我能做的最好的事情是用鍵盤重複地重新繪製圖像，這對我不起作用。」我很抱歉地說你不能用其他方式。要在畫布中獲得某些動畫，您需要重繪它。 – evolutionxbox

@evolutionxbox：那麼，HTML5畫布真的是那個貧民窟？你必須反覆移除/重繪才能獲得滑動圖像效果？這對我來說似乎很荒謬。 – Matthew

這不是貧民窟。這就是所有動畫的工作原理。使用CSS，您（程序員）無法訪問該動畫級別。這就是你的電腦如何在你的顯示器上放置圖像。它一次又一次地以大約60倍的速度繪製它們。 – evolutionxbox

我做了你想要的這裏工作小提琴：https://jsfiddle.net/uu4jqpqy/1/

主要的一點是，你必須有setInterval做重繪的環路上的一個鍵正確的方向下來，關鍵了清除該區間：

if (event.keyCode == 37) { 
    // CODE THAT STARTS LEFT IMAGE MOVEMENT GOES HERE. 
    if(!leftPointer) { 
     leftPointer = setInterval(function() { 
      xval = xval - 1; 
      ctx.clearRect(0, 0, c.width, c.height); 
      ctx.drawImage(img,xval,yval); 
     }, speed) 
    } 
}

和

if (event.keyCode == 37) { 
    // CODE THAT STOPS LEFT IMAGE MOVEMENT GOES HERE. 
    clearInterval(leftPointer); 
}

你也必須作出一些變量的外部範圍中來得到這個工作。

來源

2015-07-10 15:57:12 Starscream1984

是的！謝謝，這看起來好像會做到這一點......問題，EventListener如何退出小提琴工作？如果我可以在我的測試頁面上運行，我會考慮這個答案。順便說一句，我是gen1變形金剛迷！：D – Matthew

真棒，變形金剛一路走過 - 在jsfiddle網站，你必須先點擊進入輸出面板，靠近畫布圖像，讓關鍵聽衆工作，如果這就是你的意思 – Starscream1984

啊不，我看到了什麼你的意思是，我忘了在清除間隔後清除變量，更新了我的小提琴：https://jsfiddle.net/uu4jqpqy/2/ – Starscream1984

使圖像在<canvas>與JavaScript鍵盤輸入移動？

回答

相關問題