HTML5 Game - Multiple rotated squares

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Rotate

Description

Multiple rotated squares

Demo

ResultView the demo in separate window 

<!DOCTYPE html>  
<html> 
<head> 
<style> 
#canvas { //from   w ww  .j ava  2 s .c om
  border:1px solid #03F; 
  background:#CFC; 
} 
</style> 
</head> 
<body> 
<canvas id="canvas" width="640" height="480"></canvas> 
<script> 
  let context = document.getElementById('canvas').getContext('2d'); 
    
      context.setTransform(1,0,0,1,0,0); 
      let angleInRadians = 45 * Math.PI / 180; 
      let x = 50; 
      let y = 100; 
      let width = 40; 
      let height = 40; 
      context.translate(x+.5*width, y+.5*height); 
      context.rotate(angleInRadians); 
      context.fillStyle = "red"; 
      context.fillRect(-.5*width,-.5*height , width, height); 

      context.setTransform(1,0,0,1,0,0); 
      angleInRadians = 75 * Math.PI / 180; 
      x = 100; 
      y = 100; 
      width = 40; 
      height = 40; 
      context.translate(x+.5*width, y+.5*height); 
      context.rotate(angleInRadians); 
      context.fillStyle = "red"; 
      context.fillRect(-.5*width,-.5*height , width, height); 

      context.setTransform(1,0,0,1,0,0); 

      angleInRadians = 90 * Math.PI / 180; 
      x = 150; 
      y = 100; 
      width = 40; 
      height = 40; 
      context.translate(x+.5*width, y+.5*height); 
      context.rotate(angleInRadians); 
      context.fillStyle = "red"; 
      context.fillRect(-.5*width,-.5*height , width, height); 
      context.setTransform(1,0,0,1,0,0); 
      angleInRadians = 120 * Math.PI / 180; 
      x = 200; 
      y = 100; 
      width = 40; 
      height = 40; 
      context.translate(x+.5*width, y+.5*height); 
      context.rotate(angleInRadians); 
      context.fillStyle = "red"; 
      context.fillRect(-.5*width,-.5*height , width, height); 


</script> 



</body> 
</html>

Related Topic