Phương pháp scale() của canvas HTML
Đị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.
Ghi chú:Nếu bạn phóng to vẽ, tất cả các vẽ sau cũng sẽ được phóng to. Vị trí cũng sẽ được phóng to. Nếu bạn viết scale(2,2)thì 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 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);
Lưu ý:Cung cấp thêm các ví dụ tại chân trang.
Cú pháp
context.scale(scalewidth,scaleheight);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| scalewidth | Chỉnh sửa chiều rộng của vẽ hiện tại (1=100%, 0.5=50%, 2=200%, v.v.). |
| scaleheight | Chỉnh sửa chiều cao của vẽ hiện tại (1=100%, 0.5=50%, 2=200%, v.v.). |
Nhiều ví dụ hơn
Ví dụ 2
Vẽ một hình vuông; phóng to 200%, vẽ lại hình vuông; phóng to 200%, sau đó vẽ lại hình vuông; phóng to 200%, vẽ lại hình vuông:
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 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 |
Ghi chú:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
