HTML canvas createRadialGradient()メソッド
Canvas オブジェクト例
矩形を描画し、放射状/円形グラデーションで塗りつぶします：
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);
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);
試してみる »
ブラウザサポート
Internet Explorer 9、Firefox、Opera、Chrome、Safari は createRadialGradient() メソッドをサポートしています。
注意：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。
定義と使い方
createRadialGradient() メソッドは放射状/円形グラデーションオブジェクトを作成します。
グラデーションは、矩形、円形、線、テキストなどを塗りつぶすために使用できます。
ヒント：このオブジェクトをstrokeStyle 或 fillStyleプロパティの値として使用してください。
ヒント：使用してくださいaddColorStop()メソッドは、異なる色と、gradient オブジェクト内で色を配置する場所を指定します。
| JavaScript 構文： | context.createRadialGradient(x0,y0,r0,x1,y1,r1); |
|---|
パラメータ値
| パラメータ | 説明 |
|---|---|
| x0 | グラデーションの開始円の x 座標 |
| y0 | グラデーションの開始円の y 座標 |
| r0 | 開始円の半径 |
| x1 | グラデーションの終了円の x 座標 |
| y1 | グラデーションの終了円の y 座標 |
| r1 | 終了円の半径 |
その他の拡張