HTML Canvas Animation Ease Out

Description

HTML Canvas Animation Ease Out

View in separate window 

<!doctype html>
<html lang="en">
<body>
  <canvas id="canvasOne" width="500" height="500">
 Your browser does not support the HTML 5 Canvas. 
</canvas>/*from  www.  ja va2s.  c  o  m*/
  <script type="text/javascript">
    let shipImage;
    shipImage = new Image();
    shipImage.src = "image1.png"

    function drawScreen() {

      context.fillStyle = '#000000';
      context.fillRect(0, 0, theCanvas.width, theCanvas.height);
      //Box
      context.strokeStyle = '#ffffff';
      context.strokeRect(1, 1, theCanvas.width - 2, theCanvas.height - 2);
      let dx = ship.endx - ship.x;
      let dy = ship.endy - ship.y;

      ship.velocityx = dx * easeValue;
      ship.velocityy = dy * easeValue;

      ship.x += ship.velocityx;
      ship.y += ship.velocityy;

      context.drawImage(shipImage, ship.x, ship.y);

    }
    let easeValue = .05;
    let p1 = {
      x : 240,
      y : -20
    };
    let p2 = {
      x : 240,
      y : 470
    };

    let ship = {
      x : p1.x,
      y : p1.y,
      endx : p2.x,
      endy : p2.y,
      velocityx : 0,
      velocityy : 0
    };
    let points = new Array();

    theCanvas = document.getElementById('canvasOne');
    context = theCanvas.getContext('2d');

    function gameLoop() {
      window.setTimeout(gameLoop, 20);
      drawScreen()
    }

    gameLoop();
  </script>

</body>
</html>



PreviousNext

Related