キャンバスで画像を移動するにはどうすればよいですか？

-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-statement'の前に値を変更したり、それを再定義したりすることはないので、' true'にすることはできません。 –

また、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

キャンバスで画像を移動するにはどうすればよいですか？

答えて

関連する問題