如何讓圖像在畫布中移動？

-3

我正在嘗試使圖像移動，但我不斷收到一個錯誤信息value，表示它沒有定義。我不知道如果我甚至做到這一點正確的人可以讓這件事情工作請！如何讓圖像在畫布中移動？

window.requestAnimFrame = (function(callback) { 
    return window.requestAnimationFrame || 
      window.webkitRequestAnimationFrame || 
      window.mozRequestAnimationFrame || 
      window.oRequestAnimationFrame || 
      window.msRequestAnimationFrame || 
      function(callback) { 
       window.setTimeout(callback, 1000/60); 
      }; 
    })(); 

    var blueCar = new Image(); 
    var redCar = new Image(); 

    // images 
    function image(){ 
     blueCar.src = "http://worldartsme.com/images/car-top-view-clipart-1.jpg"; 
     redCar.src = "http://images.clipartpanda.com/car-clipart-top-view-free-vector-red-racing-car-top-view_099252_Red_racing_car_top_view.png"; 

    } 

    window.onload = function draw(){ 
     var canvas = document.getElementById('canvas'); 
     var ctx = canvas.getContext('2d'); 
     ctx.globalCompositeOperation = 'destination-over'; 
     window.requestAnimationFrame(draw); 

     // finish line 
     ctx.beginPath(); 
     ctx.moveTo(1020, 150); 
     ctx.lineTo(1020, 0); 
     ctx.strokeStyle = "#FFEF0E"; 
     ctx.stroke(); 

     //blue car 
     ctx.save(); 
     if (blueCar.complete) { 
      ctx.drawImage(blueCar, 10, 10, 100, 60); 
     } 

     // red car 
     if (redCar.complete) { 
      ctx.drawImage(redCar, 10, 80, 100, 60); 
     } 
    } 

    //animate on click 
    document.getElementById('canvas').addEventListener('click', function animate(lastTime, redCar, blueCar, runAnimation, canvas, ctx) { 
     if (runAnimation.value) { 
      // update 
      var time = (new Date()).getTime(); 
      var timeDiff = time - lastTime; 

      var redSpeed = Math.floor((Math.random() * 400) + 1); 
      var blueSpeed = Math.floor((Math.random() * 400) + 1); 
      var linearDistEachFrameRed = redSpeed * timeDiff/1000; 
      var linearDistEachFrameBlue = blueSpeed * timeDiff/1000; 
      var currentX = redCar.x; 
      var currentZ = blueCar.x; 

      if (currentX < canvas.width - redCar.width - redCar.borderWidth/2) { 
       var newX = currentX + linearDistEachFrameRed; 
       redCar.x = newX; 
      } 

      if (currentZ < canvas.width - blueCar.width - blueCar.borderWidth/2) { 
       var newZ = currentZ + linearDistEachFrameBlue; 
       blueCar.x = newZ; 
      } 

      //clear 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 
      image(); 

      requestAnimFrame(function() { 
       animate(time, redCar, blueCar, runAnimation, canvas, ctx); 
      }); 
     } 

     var runAnimation = { 
      value: false 
     }; 
    }); 
    image();

來源

2016-05-16 Angel

您正在嘗試在定義它之前使用'runAnimation'。它也似乎如果你在你的'if語句'之前移動它，你永遠不會改變它的值，或者將會重新定義它，因此永遠不會'真'。 –

您還定義了一個window.requestAnimFrame函數，然後稍後調用requestAnimationFrame。在完成任何繪圖操作之前，您還正在請求動畫幀。您應該先進行更新和繪圖，然後請求新的動畫幀。更新，繪製，請求新框架，沖洗，重複:) – ManoDestra

SO不是人們只是爲你「工作」的地方 –

以爲我會把這個問題作爲如何在畫布上設置動畫的例子。我從上面的例子中拿走了藍色的汽車，只需將它移動到一個橢圓形中而不需要旋轉。您可以通過ctx.translate()和ctx.rotate()方法輕鬆實現汽車的旋轉。

您可以看到，我正在加載圖像資產，並且只有在加載資源時纔開始動畫。然後，調用循環，調用繪製和更新，傳遞它們的刻度和差異，以便在這些方法內進行平滑的運動計算。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Image Animation Test</title> 
     <meta charset="UTF-8"> 
     <script> 
      const BLUE_URL = "http://worldartsme.com/images/car-top-view-clipart-1.jpg"; 
      const DESIRED_ROTATION_SPEED = Math.PI/2; 

      var raf; 
      var blueCar; 
      var ctx; 
      var lastTick = 0; 
      var position = { x:0, y:0, angle:0 }; 
      var center = { x:0, y:0 }; 

      function getRaf() { 
       return window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame || 
        function(callback) { 
         window.setTimeout(callback, 1000/60); 
        }; 
      } 

      function clearContext(fillColor) { 
       ctx.fillStyle = fillColor; 
       ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
      } 

      function update(gameTime) { 
       position.angle += (gameTime.diff/1000) * DESIRED_ROTATION_SPEED; 
       if (position.angle > (Math.PI * 2)) { 
        position.angle -= Math.PI * 2; 
       } 

       position.x = center.x + (Math.cos(position.angle) * 180); 
       position.y = center.y + (Math.sin(position.angle) * 140); 
      } 

      function draw(gameTime) { 
       clearContext('#101010'); 
       var drawHeight = 100; 
       var drawWidth = drawHeight * blueCar.width/blueCar.height; 
       ctx.drawImage(blueCar, 0, 0, blueCar.width, blueCar.height, position.x - (drawWidth/2), position.y - (drawHeight/2), drawWidth, drawHeight); 
      } 

      function loop(tick) { 
       var diff = tick - lastTick; 
       lastTick = tick; 
       var gameTime = { tick:tick, lastTick:lastTick, diff:diff }; 
       update(gameTime); 
       draw(gameTime); 
       raf(loop); 
      } 

      function init(event) { 
       console.log(BLUE_URL); 
       var canvas = document.getElementById('canvas'); 
       canvas.width = 800; 
       canvas.height = 600; 
       center.x = canvas.width/2; 
       center.y = canvas.height/2; 
       position.x = center.x; 
       position.y = center.y; 
       ctx = canvas.getContext('2d'); 
       raf = getRaf(); 
       blueCar = new Image(); 
       blueCar.addEventListener('load', function(event) { 
        startAnimation(); 
       }, false); 
       blueCar.src = BLUE_URL; 
      } 

      function startAnimation() { 
       raf(loop); 
      } 

      window.addEventListener('load', init, false); 
     </script> 
    </head> 
    <body> 
     <canvas id="canvas"><h1>Canvas not supported</h1></canvas> 
    </body> 
</html>

來源

2016-05-16 21:51:46 ManoDestra

感謝您的演示，但我仍然不明白我在做什麼。 – Angel

它會來的。通過代碼工作。窗口加載，調用init。 Init加載藍色的汽車圖像。一旦完全加載，startAnimation就會被調用。然後這會啓動循環，更新，繪製，然後再次調用自己。任何問題，只要問:) – ManoDestra

如何讓圖像在畫布中移動？

回答

相關問題