19/09/2018, 14:58
fillRect() trong Canvas
Vẽ hình chữ nhật được đổ màu với kích thước 150*100 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 < ! DOCTYPE html > < html > ...
Vẽ hình chữ nhật được đổ màu với kích thước 150*100
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 |
<!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.fillRect(20, 20, 150, 100); </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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| fillRect() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức fillRect() sử dụng để vẽ một hình chữ nhật đã được tô màu. Mặc định, màu được tô sẽ là màu đen.
Mẹo: Thuộc tính fillStyle dùng để thiết lập màu, dải màu hoặc mẫu họa tiết sử dụng để đổ lên hình.
Cú pháp JavaScript: context.fillRect(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 |
