Phương pháp scale() của Canvas
Định nghĩa và cách sử dụng
scale() Phương pháp phóng to vẽ hiện tại, lớn hơn hoặc nhỏ hơn.
Chú ý:Nếu bạn phóng to vẽ, tất cả các vẽ sau cũng sẽ được phóng to. Định vị cũng sẽ được phóng to. Nếu bạn viết scale(2,2)Vậy vẽ sẽ được định vị cách góc trên bên trái của canvas hai lần.
Thực hành
Ví dụ 1
Vẽ hình vuông, phóng to 200%, sau đó vẽ hình vuông lại:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
Lưu ý:Cung cấp nhiều ví dụ khác ở cuối trang.
Cú pháp
context.scale(scalewidth,scaleheight);
Giá trị của tham số
| 参數 | Mô tả |
|---|---|
| scalewidth | Phóng to chiều rộng hiện tại của vẽ (1=100%, 0.5=50%, 2=200%, v.v.). |
| scaleheight | Phóng to chiều cao hiện tại của vẽ (1=100%, 0.5=50%, 2=200%, v.v.). |
Các ví dụ khác
Ví dụ 2
Vẽ một hình vuông; phóng to 200%, vẽ hình vuông lại; phóng to 200%, sau đó vẽ hình vuông lại; phóng to 200%, vẽ hình vuông một lần nữa:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
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ú ý:Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.
