19/09/2018, 14:58
rect() trong Canvas
Vẽ hình chữ nhật có kích thước 50*100 pixels 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 < ! DOCTYPE html > < html > ...
Vẽ hình chữ nhật có kích thước 50*100 pixels
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 |
<!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.rect(20, 20, 150, 100); ctx.stroke(); </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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| rect() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức rect() dùng để tạo hình chữ nhật.
Mẹo: Sử dụng phương thức stroke() hoặc fill() để hiển thị hình chữ nhật trên canvas.
Cú pháp JavaScript: context.rect(x,y,awidth,height);
Giá trị tham số
| Tham số | Miêu tả |
|---|---|
| x | Tọa độ X của góc trái phía trên của hình chữ nhật |
| y | Tọa độ Y của góc trái phía trên của hình chữ nhật |
| awidth | Chiều dài của hình chữ nhật, tính bằng pixels |
| height | Chiều cao của hình chữ nhật, tính bằng pixels |
Ví dụ
Vẽ 3 hình chữ nhật với phương thức rect()
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 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!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"); // Red rectangle ctx.beginPath(); ctx.lineWidth = "6"; ctx.strokeStyle = "red"; ctx.rect(5, 5, 290, 140); ctx.stroke(); // Green rectangle ctx.beginPath(); ctx.lineWidth = "4"; ctx.strokeStyle = "green"; ctx.rect(30, 30, 50, 50); ctx.stroke(); // Blue rectangle ctx.beginPath(); ctx.lineWidth = "10"; ctx.strokeStyle = "blue"; ctx.rect(50, 50, 150, 80); ctx.stroke(); </script> </body> </html> |
Demo
