Phương thức HTML canvas setTransform ()
Thí dụ
Vẽ một hình chữ nhật, đặt lại và tạo một ma trận biến đổi mới với setTransform (), vẽ lại hình chữ nhật, đặt lại và tạo một ma trận biến đổi mới, sau đó vẽ lại hình chữ nhật. Lưu ý rằng mỗi khi bạn gọi setTransform (), nó sẽ đặt lại ma trận chuyển đổi trước đó và sau đó xây dựng ma trận mới, vì vậy trong ví dụ bên dưới, hình chữ nhật màu đỏ không được hiển thị, vì nó nằm dưới hình chữ nhật màu xanh lam:
JavaScript:
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);
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.
| Method | |||||
|---|---|---|---|---|---|
| setTransform() | Yes | 9.0 | Yes | Yes | Yes |
Định nghĩa và Cách sử dụng
Mỗi đối tượng trên canvas có một ma trận chuyển đổi hiện tại.
Phương thức setTransform () đặt lại biến đổi hiện tại thành ma trận nhận dạng, sau đó chạy biến đổi () với các đối số giống nhau.
Nói cách khác, phương thức setTransform () cho phép bạn chia tỷ lệ, xoay, di chuyển và làm lệch ngữ cảnh hiện tại.
Lưu ý: Việc chuyển đổi sẽ chỉ ảnh hưởng đến các bản vẽ được thực hiện 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ố
| Parameter | Description | Play it |
|---|---|---|
| a | Horizontal scaling | |
| b | Horizontal skewing | |
| c | Vertical skewing | |
| d | Vertical scaling | |
| e | Horizontal moving | |
| f | Vertical moving |
❮ Tham chiếu HTML Canvas