Thuộc tính fillStyle của Canvas
Định nghĩa và cách sử dụng
fillStyle Cài đặt hoặc trả về màu, dần dần hoặc mẫu để lấp đầy vẽ.
Mô hình
Mô hình 1
Định nghĩa hình vuông được lấp đầy bằng màu xanh:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
Lưu ý:Cung cấp nhiều ví dụ hơn ở cuối trang.
Cú pháp
context.fillStyle=color|gradient|pattern;
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| color | Chỉ thị màu lấp đầy vẽ Giá trị màu CSS。Giá trị mặc định là #000000。 |
| gradient | Đối tượng độ sáng dần được sử dụng để lấp đầy vẽ (thẳnghoặcRất）。 |
| pattern | Đối tượng pattern được sử dụng để lấp đầy vẽ. |
Chi tiết kỹ thuật
| Giá trị mặc định: | #000000 |
|---|
Nhiều ví dụ hơn
Ví dụ 2
Định nghĩa từ trên xuống dưới của độ sáng dần, làm mẫu lấp đầy hình vuông:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,0,170);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Ví dụ 3
Định nghĩa từ trái sang phải của độ sáng dần, làm mẫu lấp đầy hình vuông:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Ví dụ 4
Định nghĩa từ đen đến đỏ đến trắng của độ sáng dần, làm樣 thức lấp đầy hình vuông:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
Ví dụ 5
Hình ảnh được sử dụng:
Sử dụng hình ảnh để lấp đầy vẽ:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();
Hỗ trợ trình duyệt
Số liệu trong bảng cho biết phiên bản trình duyệt đầu tiên hoàn toàn hỗ trợ thuộc tính này.
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
Lưu ý:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
