HTML Canvas Animation Ease In

Description

HTML Canvas Animation Ease In

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  w ww. java 2 s.c  om*/
  <script type="text/javascript">
    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);

      ship.velocityx = ship.velocityx + (ship.velocityx * easeValue);
      ship.velocityy = ship.velocityy + (ship.velocityy * easeValue);

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

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

    }

    let easeValue = .05;
    let p1 = {
      x : 240,
      y : 470
    };
    let tempX;
    let tempY;
    let tempSpeed = .5;
    let tempAngle = 270;
    let tempRadians = tempAngle * Math.PI / 180;
    let tempvelocityx = Math.cos(tempRadians) * tempSpeed;
    let tempvelocityy = Math.sin(tempRadians) * tempSpeed;

    let ship = {
      x : p1.x,
      y : p1.y,
      velocityx : tempvelocityx,
      velocityy : tempvelocityy
    };
    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