HTML5 Game - Rotate with transformation matrix

  1. HOME
  2. HTML5 Game
  3. Canvas
  4. Transformation Matrix

Description

Rotate with transformation matrix

Demo

ResultView the demo in separate window 

<html>
    <head>
        <script>
            window.onload = function(){
                let canvas = document.getElementById("myCanvas");
                let context = canvas.getContext("2d");
               //from   www  .  j a v  a  2s.c  o m
                context.fillStyle = "red";   
                context.fillRect(50, 50, 100, 100);  
   context.setTransform(1, 0, 0, 1, 0, 0); // Identity matrix  
   let xScale = Math.cos(0.7854);  
   let ySkew = -Math.sin(0.7854);  
   let xSkew = Math.sin(0.7854);  
   let yScale = Math.cos(0.7854);  
   let xTrans = 200;  
   let yTrans = 200;  
     
   context.transform(xScale, ySkew, xSkew, yScale, xTrans, yTrans);  
                context.fillStyle = "blue";  
   context.fillRect(-50, -50, 100, 100);  



  

            };
        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
        </canvas>
    </body>
</html>

Related Topic