HTMLキャンバス createRadialGradient() メソッド
定義と使用方法
createLinearGradient() メソッドで放射状/円形グラディエントオブジェクトを作成します。
グラディエントは矩形、円、線、テキストなどに塗りつぶすことができます。
ヒント：次を使用してください strokeStyle または fillStyle 属性の値。
ヒント：次を使用してください addColorStop() メソッドは、異なる色を定義し、グラディエントオブジェクト内で色をどこに配置するかを指定します。
例
矩形を描画し、放射状/円形グラディエントで塗りつぶします：
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");
// グラディエントで塗りつぶす
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,100);
構文
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
パラメータの値
| パラメータ | 説明 |
|---|---|
| x0 | グラデーションの開始円の x 座標 |
| y0 | グラデーションの開始円の y 座標 |
| r0 | グラデーションの開始円の半径 |
| x1 | グラデーションの終了円の x 座標 |
| y1 | グラデーションの終了円の y 座標 |
| r1 | 円の終了半径 |
ブラウザのサポート
表の数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
注釈：Internet Explorer 8 以前のバージョンは <canvas> エレメントをサポートしていません。
