HTML5 Game - Canvas Animation Rotation

Image rotating animation

Demo

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <style type = "text/css">
    .hidden{//from  w w w .  j a  va  2  s  .  co  m
      display: none;
    }
    body {
      background-color: #cccccc;
    } 
 </style>
  <script type = "text/javascript">
  let drawing;
  let con;
  let goofyPic;
  let angle = 0;  
  CANV_HEIGHT = 200;
  CANV_WIDTH = 200;
  SPR_HEIGHT = 50;
  SPR_WIDTH = 40;

  function init(){
    drawing = document.getElementById("drawing");
    con = drawing.getContext("2d");
    goofyPic = document.getElementById("goofyPic");

    setInterval(draw, 50);
  }
  function draw(){
    //clear background
    con.fillStyle = "white";
    con.fillRect(0, 0, CANV_HEIGHT, CANV_WIDTH);

    //draw border
    con.strokeStyle = "red";
    con.lineWidth = "5";
    con.strokeRect(0, 0, CANV_WIDTH, CANV_HEIGHT);
 
    //change the rotation angle
    angle += .25;
    if (angle > Math.PI * 2){
      angle = 0;
    }

    //start a new transformation system 
    con.save();
    con.translate(100, 100);
    con.rotate(angle);

    //draw the image
    con.drawImage(goofyPic,
       SPR_WIDTH/-2, SPR_HEIGHT/-2, 
       SPR_WIDTH, SPR_HEIGHT);
     con.restore();
 }
  </script>
</head>

<body onload = "init()">
  <h1>Rotation</h1>

  <img class = "hidden"
       id = "goofyPic"
       src = "http://java2s.com/style/demo/jet.png"
       alt = "jet" />

  <canvas id = "drawing"
          height = "200"
          width = "200">
    <p>Canvas not supported</p>
  </canvas>

</body>
</html>
HTML5 Game - Canvas Animation Rotation

Image rotating animation

Demo

Related Topics
