使用png文件的畫布動畫

我正在嘗試使用畫布和帶有透明背景的PNG文件製作賽車遊戲。使用png文件的畫布動畫

我按住其中一個箭頭時出現問題。在運動的相反方面，它看起來像一個白色陰影，汽車的舊位置。

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="text/javascript"> 

      var canvas; 
      var ctx; 
      var car = new Image(); 
      var x = 0; 
      var y = 0; 


      function startUp(){ 
       canvas = document.getElementById('myCanvas'); 
       ctx = canvas.getContext('2d'); 

       loadImages(); 
       startGameLoop(); 
      } 


      function startGameLoop() { 

       setInterval(function() { 
        drawScreen(); 
        drawCar(); 
       }, 16); 
       window.addEventListener('keydown', whatKey, true); 

      } 

      function drawScreen(){ 

       ctx.clearRect(0, 0, canvas.width, canvas.height); 

       ctx.fillStyle = '#aaaaaa'; 
       ctx.rect(0, 0, canvas.width, canvas.height); 
       ctx.fill(); 
      } 

      function drawCar(){ 

       ctx.drawImage(car, x ,y, 200, 103); 
      } 

      function whatKey(evt) { 

       switch (evt.keyCode) { 

        // Left arrow. 
        case 37: { 
         x -= 15; 
        } 
         break; 

        // Right arrow. 
        case 39:{ 
         x += 15; 
        } 
         break; 

        // Down arrow 
        case 40:{ 
         y += 15; 
        } 
         break; 

        // Up arrow 
        case 38: { 
         y -= 15; 
        } 
         break; 
       } 

      } 

      function loadImages() { 
       car.src = 'http://sammywasem.com/images/f3-top.png'; 
      } 
     </script> 
    </head> 

    <body onload="startUp()"> 
     <canvas id="myCanvas" width="1050" height="620"> 
     </canvas> 
    </body> 
</html>

來源

2014-04-19 user3549461