用JavaScript移動圖片

有人可以幫我看看我的代碼嗎？我試圖在畫布中移動圖像，但它不會移動。我的代碼可能是錯誤的。有人能幫助我嗎？謝謝！用JavaScript移動圖片

<script> 
var canvas; 
var canvasContext; 

var framesPerSecond = 30; 

var posX = 10; 
var posY = 10; 

window.onload = function(){ 
    canvas = document.getElementById("playGround"); 
    canvasContext = canvas.getContext("2d"); 
    setInterval(drawEverything(), 1000/framesPerSecond); 
    canvas.addEventListener("keydown", moveImg); 
} 

function drawEverything(){ 
    colorRect(0,0,canvas.width,canvas.height,"black"); 
    drawImage("mario",posX,posY); 
} 

function drawImage(id, x, y){ 
    var img = document.getElementById(id); 
    canvasContext.drawImage(img,x,y,30,30); 
} 

function colorRect(x, y, width, height, color){ 
    canvasContext.fillStyle = color; 
    canvasContext.rect(x,y,width,height); 
    canvasContext.stroke(); 
} 

function moveImg(evt){ 
    switch(evt.keyCode) { 
     // Left arrow key pressed 
     case 37: 
      posX-=5; 
      break; 
     // Up Arrow Pressed 
     case 38: 
      posY-=5; 
      break; 
     // Right Arrow Pressed 
     case 39: 
      posX+=5; 
      break; 
     // Down Arrow Pressed 
     case 40: 
      posY+=5; 
      break; 
    }}; 
</script>

我在網上查看答案，但我似乎無法找到任何東西。也許我有一個語法問題？

來源

2016-02-05 Guillermo Herrera

解釋你所期望的。你到目前爲止如何診斷這個問題？ – kilojoules

每次你按下箭頭鍵，圖像都會移動，但它根本不會移動。它保持在同一個位置。 Idk什麼是我的代碼錯了。 –

您有兩個問題，如下所示。檢查工作演示 - Fiddle（首先在右下角部分的任意位置單擊將焦點設置在那裏）：

畫布沒有焦點，所以你必須改變canvas.addEventListener("keydown", moveImg);到document.addEventListener("keydown", moveImg);
在moveImg功能，你忘了根據按鍵來更新圖像位置。 switch語句後添加drawImage("mario",posX,posY);。

來源

2016-02-05 06:12:01

確實移動了圖像，但它留下了一些其他圖像，我不想那樣。我只想簡單地移動圖像而不用多次繪製圖像，並留下一條痕跡。 –

好吧我修好了！我只需要使用背景色爲白色的context.fillRect（）！謝謝您的幫助！ –

很高興我幫助！你可以通過點擊左邊的複選標記來接受答案。 –

用JavaScript移動圖片

回答

相關問題