Phương thức transform() canvas HTML

Tài liệu tham khảo Canvas HTML5

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

transform() Phương thức thay thế ma trận变换 hiện tại. Nó hoạt động trên ma trận变换 hiện tại với ma trận sau:

a  c  e
b  d  f
0  0  1

Ng换句话说, phương thức transform() cho phép bạn phóng to, quay, di chuyển và nghiêng môi trường hiện tại.

Chú ý:Phương thức变换 này chỉ ảnh hưởng đến vẽ sau khi gọi phương thức transform().

Chú ý:Hành vi của phương thức transform() so với ma trận变换 được rotate()công thứcscale()công thứctranslate() hoặc các变换 khác hoàn thành bằng phương thức transform(). Ví dụ: Nếu bạn đã đặt vẽ lên hai lần, phương thức transform() sẽ làm cho vẽ được phóng to hai lần, vẽ cuối cùng của bạn sẽ được phóng to bốn lần.

Lưu ý:Xin xem setTransform() Phương thức, nó sẽ không thay đổi hành vi so với các变换 khác.

Mô hình

Vẽ một hình vuông; thêm một ma trận变换 mới bằng phương thức transform() và vẽ hình vuông lại; thêm một ma trận变换 mới và vẽ hình vuông lại. Lưu ý rằng mỗi khi bạn gọi phương thức transform(), nó sẽ xây dựng trên ma trận变换 trước:

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

Thử ngay

Cú pháp

context.transform(a,b,c,d,e,f);

Giá trị tham số

参數 Mô tả
a Vẽ thu phóng ngang.
b Vẽ nghiêng ngang.
c Vẽ nghiêng thẳng đứng.
d Vẽ thu phóng thẳng đứng.
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

Chú ý:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.

Tài liệu tham khảo Canvas HTML5