Biến đổi (Transformation) HTML5 Canvas

Canvas 2D sử dụng ma trận biến đổi affine 3x3 để quản lý hệ tọa độ. Các phương thức biến đổi sửa đổi ma trận này:

• translate(x, y): Dịch chuyển gốc tọa độ.
• rotate(angle): Xoay quanh gốc (radian).
• scale(x, y): Thay đổi tỷ lệ đơn vị.
• transform(a, b, c, d, e, f): Nhân ma trận hiện tại với ma trận mới (tích lũy).
• setTransform(a, b, c, d, e, f): Ghi đè ma trận hiện tại = ma trận mới (reset).

Cấu trúc ma trận

[ a  c  e ]
[ b  d  f ]
[ 0  0  1 ]

• a: scale X, d: scale Y.
• b: skew Y, c: skew X.
• e: translate X, f: translate Y.

Ví dụ: Xoay lặp 12 hình vuông + reset ma trận

<!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); // 30°
          var cos = Math.cos(Math.PI/6);
          ctx.translate(200, 200); // Dịch gốc ra giữa canvas

          // Vẽ 12 hình vuông, mỗi lần xoay thêm 30° (tích lũy qua transform)
          for (var i=0; i<=12; i++) {
            var c = Math.floor(255 / 12 * i);
            ctx.fillStyle = "rgb(" + c + "," + c + "," + c + ")";
            ctx.fillRect(0, 0, 100, 100);
            // Nhân ma trận xoay 30° vào ma trận hiện tại
            ctx.transform(cos, sin, -sin, cos, 0, 0);
          }

          // Reset ma trận hoàn toàn: lật ngang + dịch
          ctx.setTransform(-1, 0, 0, 1, 200, 200);
          ctx.fillStyle = "rgba(100, 100, 255, 0.5)";
          ctx.fillRect(50, 50, 100, 100);
        }
      }
    </script>
  </head>
  <body onload="drawShape();">
    <canvas id="mycanvas" width="400" height="400"></canvas>
  </body>
</html>

transform() vs setTransform()

Dùng setTransform(1,0,0,1,0,0) để reset về identity matrix.