Phương pháp transform() trên canvas

Tài liệu tham khảo Canvas

Đị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 pháp thay thế ma trận变换 hiện tại. Nó hoạt động trên ma trận变换 hiện tại bằng ma trận sau đây được mô tả:

a  c  e
b  d  f
0  0  1

Nói cách khá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.

Ghi chú:变换 này sẽ chỉ ảnh hưởng đến đồ họa sau khi gọi phương pháp transform().

Ghi chú:Hành vi của phương pháp transform() so với ma trận变换. rotate()vàscale()vàtranslate() hoặc các变换 khác hoàn thành bằng transform(). Ví dụ: Nếu bạn đã đặt đồ họa thành hai lần, phương pháp transform() sẽ làm đồ họa phóng to hai lần, đồ họa của bạn cuối cùng sẽ được phóng to bốn lần.

Lưu ý:Xin xem setTransform() Phương pháp, 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 cách sử dụng transform(), 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 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 lập tức

Cú pháp

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

Giá trị tham số

参數 Mô tả
a Vẽ đồ họa thu nhỏ ngang.
b Vẽ đồ họa nghiêng ngang.
c Vẽ đồ họa nghiêng thẳng đứng.
d Vẽ đồ họa thu nhỏ thẳng đứng.
e Vẽ đồ họa di chuyển ngang.
f Vẽ đồ họa di chuyển thẳng đứng.

Hỗ trợ trình duyệt

Số trong bảng đã ghi chú 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 trước không hỗ trợ yếu tố <canvas>.

Tài liệu tham khảo Canvas