HTML5 Game - Translate and then rotate

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

Description

Translate and then rotate

Demo

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Transforms</title>

  <style>
canvas {/*from   w  ww . java  2  s  .co  m*/
  border: 1px dashed black;
}
  </style>

  <script>
window.onload = function() {
  let canvas = document.getElementById("drawingCanvas");
  let context = canvas.getContext("2d");

  context.translate(100, 100);

  // Draw 10 squares.
  let copies = 10;
  for (let i=1; i<copies; i++) {
    context.rotate(2 * Math.PI * 1/(copies-1));
    // Draw the square.
    context.rect(0, 0, 50, 50);
  }
  context.strokeStyle = "red";
  context.stroke();
};

  </script>
</head>

<body>
  <canvas id="drawingCanvas" width="300" height="200"></canvas>
</body>
</html>

Related Topic