HTML canvas fillStyle attribute
Định nghĩa và sử dụng
fillStyle Property thiết lập hoặc trả về màu, gradient hoặc mẫu được sử dụng để lấp đầy vẽ.
Ví dụ
Ví dụ 1
Định nghĩa hình vuông được lấp đầy màu xanh dương:
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.
Syntax
context.fillStyle =color|gradient|pattern;
Giá trị thuộc tính
| Giá trị | Mô tả |
|---|---|
| color | Chỉ ra màu lấp đầy vẽ CSS color value. Mặc định là #000000. |
| gradient | Object gradient được sử dụng để lấp đầy vẽ (LinehoặcRadiative) |
| pattern | Object pattern được sử dụng để lấp đầy vẽ |
Chi tiết kỹ thuật
| Mặc định: | #000000 |
|---|
More examples
Ví dụ 2
Định nghĩa một dải màu từ trên xuống dưới 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 một dải màu từ trái qua phải 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 một dải màu từ đen đến đỏ đến trắng 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(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ố trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.
| 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>.
