HTML5 Canvas Transformation

HTML5 ক্যানভাস ট্রান্সফরমেশন ম্যাট্রিক্সকে সরাসরি মডিফাই করার মেথড প্রদান করে। ট্রান্সফরমেশন ম্যাট্রিক্স শুরুতে আইডেন্টিটি ট্রান্সফরম হতে হবে। তারপর ট্রান্সফরমেশন মেথডগুলো ব্যবহার করে এটি অ্যাডজাস্ট করা যায়।

উদাহরণ

ক্যানভাস ট্রান্সফরমেশনের একটি উদাহরণ:

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      function drawShape(){
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
          var sin = Math.sin(Math.PI/6);
          var cos = Math.cos(Math.PI/6);
          ctx.translate(200, 200);
          var c = 0;
          for (var i=0; i <= 12; i++) {
            c = Math.floor(255 / 12 * i);
            ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
            ctx.fillRect(0, 0, 100, 100);
            ctx.transform(cos, sin, -sin, cos, 0, 0);
          }
          ctx.setTransform(-1, 0, 0, 1, 200, 200);
          ctx.fillStyle = "rgba(100, 100, 255, 0.5)";
          ctx.fillRect(50, 50, 100, 100);
        } else {
          alert('You need Safari or Firefox 1.5+ to see this demo.');
        }
      }
    </script>
  </head>
  <body onload="drawShape();">
    <canvas id="mycanvas" width="400" height="400"></canvas>
  </body>
</html>