例
繪製一個矩形，並用徑向/圓形漸變填充：
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() | 是 | 9 | 是 | 是 | 是 |
定義和用法
該createRadialGradient()方法創建一個徑向/圓形漸變對象。
梯度可用於填充矩形，圓形，線條，文字等
提示：用此對象的值到strokeStyle或填充樣式屬性。
提示：使用addColorStop()方法來指定不同的顏色，並在漸變中物體的顏色進行定位。
| JavaScript語法： | context.createRadialGradient(x0,y0,r0,x1,y1,r1); |
|---|
參數值
| 參數 | 描述 |
|---|---|
| x0 | 漸變的起點圓的x坐標 |
| y0 | 漸變的起點圓的y坐標 |
| r0 | 起始圓的半徑 |
| x1 | 漸變的終點圈的x坐標 |
| y1 | 漸變的終點圈的y坐標 |
| r1 | 結束圓的半徑 |