setTransform() trong Canvas
Vẽ một hình chữ nhật, thiết lập lại và tạo mới một ma trận biến đổi với setTransform(), vẽ hình chữ nhật lại một lần nữa, thiết lập lại và tạo mới một ma trận biến đổi với setTransform(), sau đó lại vẽ lại hình chữ nhật. Lưu ý rằng mỗi khi bạn gọi setTransform(), nó sẽ thiết lập lại ma trận biến ...
Vẽ một hình chữ nhật, thiết lập lại và tạo mới một ma trận biến đổi với setTransform(), vẽ hình chữ nhật lại một lần nữa, thiết lập lại và tạo mới một ma trận biến đổi với setTransform(), sau đó lại vẽ lại hình chữ nhật. Lưu ý rằng mỗi khi bạn gọi setTransform(), nó sẽ thiết lập lại ma trận biến đổi trước đó sau đó mới xây dựng ma trận mới, như trong ví dụ dưới đây, hình chữ nhật màu đỏ không được hiển thị bởi vì nó nằm dưới hình chữ nhật màu xanh:
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.setTransform(1,0.5, -0.5, 1, 30, 10); ctx.fillStyle = "red"; ctx.fillRect(0, 0, 250, 100); ctx.setTransform(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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| setTransform() | 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 setTransform() sẽ thiết lập lại ma trận biến đổi hiện tại và sau đó chạy transform() với tham số mới.
Nói cách khác, phương thức setTransform() cũng cho phép bạn thay đổi kích cỡ, xoay, di chuyển và nghiêng hình hiện tại.
Lưu ý: Các biến đổi chỉ có tác dụng lên hình SAU KHI phương thức setTransform() được gọi.
Cú pháp JavaScript: context.setTransform(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 |
