HTML5 Canvas में ट्रांसफॉर्मेशन मैट्रिक्स क्या है?

ट्रांसफॉर्मेशन मैट्रिक्स

HTML5 Canvas उन मेथड्स को प्रदान करता है जो ट्रांसफॉर्मेशन मैट्रिक्स में सीधे संशोधन की अनुमति देते हैं। ट्रांसफॉर्मेशन मैट्रिक्स प्रारंभ में आइडेंटिटी ट्रांसफॉर्म होना चाहिए। इसे फिर ट्रांसफॉर्मेशन मेथड्स का उपयोग करके समायोजित किया जा सकता है।

उदाहरण

<!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>

ट्रांसफॉर्मेशन मैट्रिक्स Canvas 2D रेंडरिंग के लिए एफाइन ट्रांसफॉर्मेशन (ट्रांसलेशन, रोटेशन, स्केलिंग, स्क्यूइंग) को सक्षम करता है।