Phương thức Canvas createLinearGradient()
Định nghĩa và cách sử dụng
createLinearGradient() Phương pháp tạo đối tượng dải tuyến tính.
Dải gradient có thể được sử dụng để lấp đầy hình vuông, hình tròn, đường thẳng, văn bản và nhiều thứ khác.
Lưu ý:Vui lòng sử dụng đối tượng này như strokeStyle hoặc fillStyle giá trị của thuộc tính.
Lưu ý:Vui lòng sử dụng addColorStop() Phương pháp quy định các màu khác nhau và vị trí của màu trong đối tượng gradient.
Ví dụ
Xem thêm:
Định nghĩa một dải 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. |
| y0 | Tọa độ y của điểm bắt đầu dải. |
| x1 | Tọa độ x của điểm kết thúc dải. |
| y1 | Tọa độ y của điểm kết thúc dải. |
Các ví dụ khác
Ví dụ 2
Định nghĩa một dải 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 từ đen đến đỏ đến trắng làm樣式的 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ợ tính chất 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ú:Trình duyệt Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.
