Phương pháp setTransform() trên canvas HTML
Đị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 pháp đặ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 phóng to, quay, di chuyển và nghiêng môi trường hiện tại.
Chú ý:变换只会影响 setTransform() 方法调用之后的绘图。
Mô hình
Vẽ một hình vuông, thông qua setTransform() để đặt lại và tạo ma trận变换 mới, vẽ hình vuông lần nữa, đặt lại và tạo ma trận变换 mới, sau đó vẽ hình vuông tiếp theo. Lưu ý, 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ị parameter
| Parameter | Mô tả |
|---|---|
| a | Vẽ quay theo chiều ngang. |
| b | Vẽ nghiêng theo chiều ngang. |
| c | Vẽ nghiêng theo chiều thẳng đứng. |
| d | Vẽ thu nhỏ theo chiều 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 cho biết 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ú ý:Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.
