19/09/2018, 14:58
scale() trong Canvas
Vẽ một hình chữ nhật, sau đó phóng to 200% và hiển thị hình mới Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5. Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 < ! DOCTYPE html > ...
Vẽ một hình chữ nhật, sau đó phóng to 200% và hiển thị hình mới
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="150" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> 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); </script> </body> </html> |
Demo
Trình duyệt hỗ trợ
Số trong bảng dưới đây thể hiện phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ cho thuộc tính.
| Thuộc tính |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| scale() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức scale() được sử dụng để phóng to hay thu nhỏ hình.
Lưu ý: Nếu bạn thay đổi kích thước hình vẽ, tất cả các nét vẽ sau cũng sẽ thay đổi theo, bao gồm cả vị trí. Nếu bạn sử dụng scale(2,2); hình sẽ có vị trí xa gấp đôi phía bên trái và bên trên so với vị trí ban đầu.
Cú pháp JavaScript: context.scale(scaleawidth,scaleheight);
Giá trị tham số
| Tham số | Miêu tả |
|---|---|
| scaleawidth | Thay đổi chiều rộng của hình hiện tại (1=100%, 0.5=50%, 2=200%, v.vv...) |
| scaleheight | Thay đổi chiều cao của hình hiện tại (1=100%, 0.5=50%, 2=200%, v.vv...) |
Ví dụ
Vẽ hình chữ nhật, phóng to 200%, vẽ lại hính chữ nhật, phóng to 200%, vẽ lại hính chữ nhật, phóng to 200%, vẽ lại hính chữ nhật:
Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.Code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" awidth="300" height="170" style="border:1px solid #d3d3d3;">Trình duyệt của bạn không hỗ trợ thẻ canvas trong HTML5.</canvas> <script> 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); </script> </body> </html> |
Demo
