Phương thức addColorStop() của Canvas
Định nghĩa và cách sử dụng
addColorStop() phương thức quy định màu và vị trí trong đối tượng gradient.
phương thức addColorStop() với createLinearGradient() hoặc createRadialGradient() Sử dụng cùng nhau.
Ghi chú:Bạn có thể gọi phương thức addColorStop() nhiều lần để thay đổi dải màu. Nếu bạn không sử dụng phương thức này đối với đối tượng gradient, dải màu sẽ không hiển thị. Để có dải màu hiển thị, bạn cần tạo ít nhất một điểm màu.
Mô hình
Ví dụ 1
Định nghĩa một dải màu từ đen đế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 grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Lưu ý:Có thêm các ví dụ ở cuối trang.
Cú pháp
gradient.addColorStop(stop,color);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| stop | Giá trị nằm giữa 0.0 và 1.0, biểu thị vị trí bắt đầu và kết thúc của dải màu. |
| color | Giá trị màu CSS hiển thị ở vị trí kết thúc. |
Th thêm các ví dụ
Ví dụ 2
Định nghĩa dải màu bằng nhiều phương thức addColorStop():
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("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
Hỗ trợ trình duyệt
Số liệu trong bảng ghi chú về 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 |
Ghi chú:Trình duyệt Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.
