HTML5 Game - Rotating an image from its center point

  1. HOME
  2. HTML5 Game
  3. Canvas Animation
  4. Rotation

Description

Rotating an image from its center point

Demo

ResultView the demo in separate window 

<!doctype html>
<html lang="en">
<body>
<div style="position: absolute; top: 50px; left: 50px;">
<canvas id="canvas" width="200" height="200">
 Your browser does not support the HTML 5 Canvas. 
</canvas>//ww w.j  a  v a2 s  .  co m
<script type="text/javascript">

  let theCanvas = document.getElementById('canvas');
    let context = theCanvas.getContext('2d');
  //canvasApp level variables
  let rotation=0;
  let x=50;
  let y=50;
  let width=20;
  let height=20;

  function drawScreen() {
    context.fillStyle = '#000000';
      context.fillRect(0, 0, 200, 200);
    context.fillStyle    = '#ffffff';
    //transformation
    let 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+.5*width,y+.5*height);
    context.rotate(angleInRadians);
    
    //drawShip
    
    context.strokeStyle = '#ffffff';
    context.beginPath();
    
    //hard coding in locations
    context.moveTo(0,-10); 
    context.lineTo(9,9);
    context.lineTo(0,-1);
    context.moveTo(-1,-1); 
    context.lineTo(-10,9);
    context.lineTo(-1,-10);
    
    
    context.stroke();
    context.closePath();
    
    //restore context
    context.restore(); //pop old state on to screen
    
    //add to rotation
    rotation++;
    

  }
  
  const FRAME_RATE=40;
  let intervalTime=1000/FRAME_RATE;
  gameLoop();
  
  function gameLoop() {
    drawScreen();
    window.setTimeout(gameLoop, intervalTime);
  }

  
</script> 

</div>
</body>
</html>

Related Topic