Phương thức strokeRect() của HTML canvas được dùng để vẽ một hình chữ nhật trên trang web. Phần tử <canvas> cho phép bạn vẽ đồ họa trên trang web bằng JavaScript. Mỗi canvas có hai thuộc tính mô tả chiều cao và chiều rộng là height và width.
Cú pháp như sau:
context.strokeRect(p, q, width, height);
Trong đó:
- p − Hoành độ góc trên bên trái của hình chữ nhật
- q − Tung độ góc trên bên trái của hình chữ nhật
- width − Chiều rộng hình chữ nhật
- height − Chiều cao hình chữ nhật
Hãy xem ví dụ triển khai thuộc tính strokeStyle của canvas:
Ví dụ
<!DOCTYPE html> <html> <body> <canvas id="newCanvas" width="550" height="400" style="border: 2px solid orange;"></canvas> <script> var c = document.getElementById("newCanvas"); var ctx = c.getContext("2d"); ctx.strokeRect(120, 120, 220, 120); </script> </body> </html>Kết quả
