19/09/2018, 14:57
fill() trong Canvas
Vẽ hình chữ nhật được tô 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 17 18 < ! DOCTYPE html > < ...
Vẽ hình chữ nhật được tô 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 17 18 |
<!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.fillStyle = "red"; ctx.fill(); </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 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| fill() | 4.0 | 2.0 | 9.0 | 3.1 | 9.0 |
Định nghĩa và cách sử dụng
Phương thức fill() dùng để đổ màu lên hình hiện tại. Mặc định là màu đen.
Mẹo: Sử dụng thuộc tính fillStyle để đổ màu / dải màu.
Lưu ý: Nếu chưa đóng nét vẽ, phương thức fill() sẽ thêm một đường thẳng từ vị trí cuối cùng đến điểm xuất phát nét vẽ và đóng nét vẽ lại (giống như closePath()), sau đó đổ màu lên hình.
Cú pháp JavaScript: context.fill();
