HTML canvas createRadialGradient() メソッド

例

四角形を描画し、放射状/円形グラデーションで塗りつぶします：
（訳注：図形が表示されない場合は、ブラウザの更新ボタンを押してください。）

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);

Try it Yourself ❯

ブラウザ・サポート

表中の数字は、メソッドを完全にサポートした最初のブラウザ・バージョンを指定しています。

メソッド
createRadialGradient()	Yes	9.0	Yes	Yes	Yes

定義と用法

createRadialGradient() メソッドは、放射状/円形グラデーションオブジェクトを作成します

グラデーションは、矩形、円、線、テキストなどを塗りつぶすために使用することができます。

チップ: strokeStyle または fillStyle プロパティの値として、このオブジェクトを使用します。

チップ: 別な色と、どこにグラデーションオブジェクトに色を配置するかを指定するために、 addColorStop() メソッドを使用します。

JavaScript 構文：	context.createRadialGradient(x0,y0,r0,x1,y1,r1);

パラメータの値

パラメータ	説明
x0	グラデーションの開始円の x 座標
y0	グラデーションの開始円の y 座標
r0	開始円の半径
x1	グラデーションの終了円の x 座標
y1	グラデーションの終了円の y 座標
r1	終了円の半径

HTML Canvas リファレンス