Phương pháp HTML canvas createRadialGradient()
Định nghĩa và cách sử dụng
createLinearGradient() phương pháp tạo đối tượng độ sáng màu hình tròn hoặc hình phễu.
Độ sáng màu 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.
Mô hình
Vẽ một hình vuông và lấp đầy bằng độ sáng màu hình tròn hoặc hình phễu:
JavaScript:
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var grd =ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "đỏ");
grd.addColorStop(1, "trắng");
// Điền với độ sáng màu
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,100);
Cú pháp
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Giá trị tham số
| Tham số | Mô tả |
|---|---|
| x0 | Tọa độ x của hình tròn mở đầu trong độ dốc |
| y0 | Tọa độ y của hình tròn mở đầu trong độ dốc |
| r0 | Bán kính của hình tròn mở đầu |
| x1 | Tọa độ x của hình tròn đóng trong độ dốc |
| y1 | Tọa độ y của hình tròn đóng trong độ dốc |
| r1 | Bán kính của hình tròn đóng |
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ú:Trình duyệt Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ yếu tố <canvas>.
