Canvas 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> 要素をサポートしていません。
