HTML5 Game - Rotate and move Images with Transformations

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

Description

Rotate and move Images with Transformations

Demo

ResultView the demo in separate window 

<!DOCTYPE HTML>
<html lang = "en">
<head>
  <style type = "text/css">
    .hidden{//from  w  w  w .jav  a  2s  .  c om
      display: none;
    }
  </style>
  <script type = "text/javascript">
  function draw(){
    let drawing = document.getElementById("drawing");
    let con = drawing.getContext("2d");
    let goofyPic = document.getElementById("goofyPic");
    
    con.save();    
    con.translate(100, 100);
    con.rotate(Math.PI / 4);
    con.scale(3.0, 1.5);
    con.drawImage(goofyPic, -25, -25, 50, 50);
    con.restore();

    //draw a rectangle using the ordinary coordinate system
    con.strokeStyle = "red";
    con.lineWidth = 5;
    con.strokeRect(0, 0, 200, 200);
  }
  </script>
</head>

<body onload = "draw()">
  <h1>Transformations</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>

Related Topic