Tăng/giảm đơn vị lưới Canvas HTML5 (scale)

Phương thức context.scale(x, y) thay đổi đơn vị đo lường của hệ tọa độ canvas, cho phép vẽ hình phóng to hoặc thu nhỏ mà không cần tính toán lại tọa độ.

Tham số

• x: Hệ số scale chiều ngang (phải > 0).
• y: Hệ số scale chiều dọc (phải > 0).

scale(1, 1) là mặc định. scale(0.5, 0.5) thu nhỏ 2 lần. scale(2, 2) phóng to 2 lần.

Ví dụ: Scale đều (uniform) và không đều (non-uniform)

<!DOCTYPE HTML>
<html>
  <head>
    <script>
      function drawShape() {
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext) {
          var ctx = canvas.getContext('2d');
          ctx.strokeStyle = "#fc0";
          ctx.lineWidth = 1.5;
          ctx.fillRect(0,0,300,300); // nền

          // Uniform scaling: thu nhỏ dần đều
          ctx.save();
          ctx.translate(50,50);
          drawSpirograph(ctx,22,6,5);
          ctx.translate(100,0);
          ctx.scale(0.75,0.75); // scale 75%
          drawSpirograph(ctx,22,6,5);
          ctx.translate(133.333,0);
          ctx.scale(0.75,0.75); // scale 75% lần nữa (tích lũy)
          drawSpirograph(ctx,22,6,5);
          ctx.restore();

          // Non-uniform: scale chỉ chiều ngang
          ctx.strokeStyle = "#0cf";
          ctx.save();
          ctx.translate(50,150);
          ctx.scale(1,0.75); // giữ chiều ngang, thu dọc 75%
          drawSpirograph(ctx,22,6,5);
          // ... lặp lại
          ctx.restore();

          // Non-uniform: scale chỉ chiều dọc
          ctx.strokeStyle = "#cf0";
          ctx.save();
          ctx.translate(50,250);
          ctx.scale(0.75,1); // thu ngang 75%, giữ chiều dọc
          drawSpirograph(ctx,22,6,5);
          // ... lặp lại
          ctx.restore();
        }
      }

      function drawSpirograph(ctx,R,r,O) {
        var x1 = R-O, y1 = 0, i = 1;
        ctx.beginPath();
        ctx.moveTo(x1,y1);
        do {
          if (i>20000) break;
          var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72));
          var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72));
          ctx.lineTo(x2,y2);
          x1=x2; y1=y2; i++;
        } while (x2 != R-O && y2 != 0);
        ctx.stroke();
      }
    </script>
  </head>
  <body onload="drawShape();">
    <canvas id="mycanvas" width="400" height="400"></canvas>
  </body>
</html>

Lưu ý quan trọng

• scale tác động tích lũy: gọi scale(0.5,0.5) 2 lần = scale 0.25 tổng cộng.
• Luôn dùng save()/restore() để izolate scale cho từng nhóm vẽ.
• scale âm (ví dụ scale(-1,1)) lật ngang (mirror), thường dùng kết hợp translate để lật quanh trục giữa.