Phương thức chuyển đổi canvas HTML ()
Thí dụ
Vẽ một hình chữ nhật, thêm một ma trận biến đổi mới với biến đổi (), vẽ lại hình chữ nhật, thêm 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 biến đổi (), nó sẽ xây dựng dựa trên ma trận biến đổi trước đó:
JavaScript:
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);
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 | |||||
|---|---|---|---|---|---|
| transform() | 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 biến đổi () thay thế ma trận biến đổi hiện tại. Nó nhân ma trận biến đổi hiện tại với ma trận được mô tả bởi:
| Một | C | e |
| b | d | f |
| 0 | 0 | 1 |
Nói cách khác, phương thức biến đổi () 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 ý: Phép biến đổi sẽ chỉ ảnh hưởng đến các bản vẽ được thực hiện sau khi phương thức biến đổi () được gọi.
Lưu ý: Phương thức biến đổi () hoạt động tương đối với các phép biến đổi khác được thực hiện bằng xoay (), scale (), translate () hoặc biến đổi (). Ví dụ: Nếu bạn đã đặt bản vẽ của mình thành tỷ lệ hai và phương thức biến đổi () chia tỷ lệ bản vẽ của bạn lên hai, thì bản vẽ của bạn bây giờ sẽ chia tỷ lệ lên bốn.
Mẹo: Kiểm tra phương thức setTransform () , phương thức này không hoạt động tương đối với các phép biến đổi khác.
| Cú pháp JavaScript: | context .transform ( 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