Phương thức Canvas setTransform()
Định nghĩa và cách sử dụng
Mỗi đối tượng trên canvas đều có một ma trận变换 hiện tại.
setTransform()
phương thức đặt lại ma trận变换 hiện tại thành ma trận đơn vị, sau đó chạy với cùng các tham số transform().
Nói cách khác, setTransform() cho phép bạn thu nhỏ, quay, di chuyển và nghiêng môi trường hiện tại.
Ghi chú:变换 chỉ ảnh hưởng đến bản vẽ sau khi gọi phương thức setTransform().
Mẫu
Vẽ một hình vuông, sử dụng setTransform() để đặt lại và tạo mới ma trận变换, vẽ hình vuông tiếp theo, đặt lại và tạo mới ma trận变换, sau đó vẽ hình vuông tiếp theo. Lưu ý rằng mỗi khi bạn gọi setTransform(), nó sẽ đặt lại ma trận变换 trước đó và xây dựng ma trận mới, vì vậy trong ví dụ dưới đây, hình vuông đỏ sẽ không hiển thị vì nó nằm dưới hình vuông xanh:
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);
Cú pháp
context.setTransform(a,b,c,d,e,f);
Giá trị tham số
Tham số | Mô tả |
---|---|
a | Chuyển đổi theo chiều ngang của bản vẽ. |
b | Chuyển đổi theo chiều ngang và nghiêng của bản vẽ. |
c | Chuyển đổi theo chiều dọc và nghiêng của bản vẽ. |
d | Chuyển đổi theo chiều dọc của bản vẽ. |
e | Vẽ di chuyển ngang. |
f | Vẽ di chuyển thẳng đứng. |
Hỗ trợ trình duyệt
Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Ghi chú:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.