transform() trong Canvas
Vẽ một hình chữ nhật, tạo một ma trận biến đổi với transform(), vẽ lại hình chữ nhật, tạo một ma trận biến đổi mới, lại vẽ lại hình chữ nhật. Lưu ý mỗi khi bạn gọi phương thức transform(), nó sẽ xây dựng dựa trên ma trận biến đổi trước đó: Trình duyệt của bạn không hỗ trợ thẻ canvas trong ...
Vẽ một hình chữ nhật, tạo một ma trận biến đổi với transform(), vẽ lại hình chữ nhật, tạo một ma trận biến đổi mới, lại vẽ lại hình chữ nhật. Lưu ý mỗi khi bạn gọi phương thức transform(), nó sẽ xây dựng dựa trên ma trận biến đổi trước đó:
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "yellow"; ctx.fillRect(0, 0, 250, 100) ctx.transform(1, 0.5, -0.5, 1, 30, 10); ctx.fillStyle = "red"; ctx.fillRect(0, 0, 250, 100); ctx.transform(1, 0.5, -0.5, 1, 30, 10); ctx.fillStyle = "blue"; ctx.fillRect(0, 0, 250, 100); </script> </body> </html> |
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| transform() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Mỗi đối tượng trên canvas đều có một ma trận biến đổi.
Phương thức transform() được sử dụng để thay thế ma trận biến đổi hiện tại bằng một ma trận mới. Nó nhân ma trận biến đổi hiện tại với ma trận mới như miêu tả dưới đây:
a c e
b d f
0 0 1
Nói cách khác, phương thức transform() cho phép bạn thay đổi kích cỡ, xoay, di chuyển và nghiêng hình.
Lưu ý: Các biến đổi chỉ có tác dụng lên hình SAU KHI phương thức transform() được gọi.
Lưu ý: Phương thức transform() hoạt động tương tự như các biến đổi khác như : rotate(), scale() hay translate(). Ví dụ: Nếu bạn đã sử dụng scale() để phóng to hình lên 2 lần, sau đó lại sử dụng transform() phóng to hình thêm 2 lần, hình của bạn lúc này sẽ to lên gấp 4 lần so với hình gốc.
Mẹo: Tham khảo thêm phương thức setTransform().
Cú pháp JavaScript: context.transform(a,b,c,d,e,f);
Giá trị tham số
| Tham số | Miêu tả |
|---|---|
| a | Thay đổi kích cỡ hình theo chiều ngang |
| b | Nghiêng hình theo chiều ngang |
| c | Nghiêng hình theo chiều dọc |
| d | Thay đổi kích cỡ hình theo chiều dọc |
| e | Di chuyển hình theo chiều ngang |
| f | Di chuyển hình theo chiều dọc |
