Phương pháp createRadialGradient() của Canvas
Định nghĩa và cách sử dụng
createLinearGradient() phương pháp tạo đối tượng gradient放射状/đường tròn.
gradient 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 sắc khác nhau và vị trí của màu sắc trong đối tượng gradient.
Mô hình
Vẽ một hình vuông và lấp đầy bằng gradient放射状/đường tròn:
JavaScript:
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Điền với gradient
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 bắt đầu trong quá trình chuyển đổi. |
| y0 | Tọa độ y của hình tròn bắt đầu trong quá trình chuyển đổi. |
| r0 | Bán kính của hình tròn bắt đầu. |
| x1 | Tọa độ x của hình tròn đóng dấu trong quá trình chuyển đổi. |
| y1 | Tọa độ y của hình tròn đóng dấu trong quá trình chuyển đổi. |
| r1 | Bán kính của hình tròn đóng dấu. |
Hỗ trợ trình duyệt
Số liệu trong bảng chỉ ra 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ú:Internet Explorer 8 và các phiên bản trước không hỗ trợ phần tử <canvas>.
