Phương pháp createLinearGradient() của HTML canvas
Định nghĩa và cách sử dụng
createLinearGradient() Phương pháp tạo đối tượng dải màu tuyến tính.
Dải màu có thể được sử dụng để lấp đầy hình vuông, hình tròn, đường, văn bản và nhiều thứ khác.
Lưu ý:Hãy sử dụng đối tượng này như strokeStyle hoặc fillStyle giá trị của thuộc tính.
Lưu ý:Hãy sử dụng addColorStop() Phương pháp quy định các màu khác nhau và vị trí đặt màu trong đối tượng gradient.
Ví dụ
Xem thêm:
Định nghĩa một dải màu từ đen đến trắng (từ trái sang 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 grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Cú pháp
context.createLinearGradient(x0,y0,x1,y1);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| x0 | Tọa độ x của điểm bắt đầu dải màu |
| y0 | Tọa độ y của điểm bắt đầu dải màu |
| x1 | Tọa độ x của điểm kết thúc dải màu |
| y1 | Tọa độ y của điểm kết thúc dải màu |
Tham khảo thêm các ví dụ
Ví dụ 2
Định nghĩa một dải màu từ trên xuố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,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ừ đen đến đỏ và sau đó đến trắng để 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);
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 |
Ghi chú:Internet Explorer 8 và các phiên bản trước không hỗ trợ yếu tố <canvas>.
