HTML Canvas Animation Space Ship rotate

Description

HTML Canvas Animation Space Ship rotate

View in separate window 

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ship rotation from center</title>

</head>//from   www.  j  a  v  a  2s.c om
<body>
<canvas id="canvas" width="200" height="200">
 Your browser does not support the HTML 5 Canvas. 
</canvas>
  <script type="text/javascript">
    var theCanvas = document.getElementById('canvas');
    var context = theCanvas.getContext('2d');
    //canvasApp level variables
    var rotation = 0;
    var x = 50;
    var y = 50;

    function drawScreen() {

      // draw background and text 
      context.fillStyle = '#000000';
      context.fillRect(0, 0, 200, 200);
      context.fillStyle = '#ffffff';
      context.font = '20px sans-serif';
      context.textBaseline = 'top';
      context.fillText("Player Ship - rotate", 0, 180);

      //transformation
      var angleInRadians = rotation * Math.PI / 180;
      context.save(); //save current state in stack 
      context.setTransform(1, 0, 0, 1, 0, 0); // reset to identity

      //translate the canvas origin to the center of the player
      context.translate(x, y);
      context.rotate(angleInRadians);

      //drawShip
      context.strokeStyle = '#ffffff';
      context.beginPath();
      context.moveTo(10, 0);
      context.lineTo(19, 19);
      context.lineTo(10, 9);
      context.moveTo(9, 9);
      context.lineTo(0, 19);
      context.lineTo(9, 0);

      context.stroke();
      context.closePath();

      //restore context
      context.restore(); //pop old state on to screen

      //add to rotation
      rotation++;

    }

    const FRAME_RATE = 40;
    var intervalTime = 1000 / FRAME_RATE;
    gameLoop();

    function gameLoop() {
      drawScreen();
      window.setTimeout(gameLoop, intervalTime);
    }
  </script>
</body>
</html>



PreviousNext

Related