例
繪製一個矩形，並具有徑向/環形漸變填充：
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");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,100); 試一試» 瀏覽器支持
在表中的數字規定，完全支持方法的第一個瀏覽器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| createRadialGradient() | 4 | 9 | 3.6 | 4 | 10.1 |
定義和用法
所述createRadialGradient()方法創建一個徑向/圓形梯度對象。
梯度可用於填充矩形，圓形，線條，文字等
Tip:使用此對象的值到的StrokeStyle或填充樣式屬性。
Tip:使用addColorStop()方法來指定不同的顏色，並且其中在對象梯度的顏色的位置。
| JavaScript語法： | context 。 createRadialGradient( x0,y0,r0,x1,y1,r1 ) ; |
|---|
參數值
| 參數 | 描述 |
|---|---|
| x0 | 漸變的起點圓的x坐標 |
| y0 | 漸變的起點圓的y坐標 |
| r0 | 起始圓的半徑 |
| x1 | 梯度的結束圓的x坐標 |
| y1 | 梯度的結束圓的y坐標 |
| r1 | 結束圓的半徑 |
<畫布對象