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:

Trình duyệt của bạn không hỗ trợ thẻ canvas HTML5.

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);

Thử trực tiếp

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>.