Phương pháp HTML canvas scale ()
Thí dụ
Vẽ một hình chữ nhật, chia tỷ lệ thành 200%, sau đó vẽ lại hình chữ nhật:
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);
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phương pháp này.
| Method | |||||
|---|---|---|---|---|---|
| scale() | Yes | 9.0 | Yes | Yes | Yes |
Định nghĩa và Cách sử dụng
Phương thức scale () chia tỷ lệ bản vẽ hiện tại, lớn hơn hoặc nhỏ hơn.
Lưu ý: Nếu bạn chia tỷ lệ một bản vẽ, tất cả các bản vẽ trong tương lai cũng sẽ được chia tỷ lệ. Định vị cũng sẽ được mở rộng. Nếu bạn chia tỷ lệ (2,2); các bản vẽ sẽ được đặt ở vị trí xa hơn hai lần so với bên trái và trên cùng của canvas như bạn chỉ định.
| Cú pháp JavaScript: | context .scale (độ rộng theo tỷ lệ, độ rộng quy mô ); |
|---|
Giá trị tham số
| Parameter | Description | Play it |
|---|---|---|
| scalewidth | Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) | |
| scaleheight | Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.) |
Các ví dụ khác
Thí dụ
Vẽ hình chữ nhật, chia tỷ lệ thành 200%, vẽ lại hình chữ nhật, chia tỷ lệ thành 200%, vẽ lại hình chữ nhật, chia tỷ lệ thành 200%, vẽ lại hình chữ nhật:
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);
❮ Tham chiếu HTML Canvas