例
四角形を描画し、放射状/円形グラデーションで塗りつぶし：
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.0 | はい | はい | はい |
定義と使用法
createRadialGradient()メソッドは、ラジアル/円形グラデーションオブジェクトを作成します。
勾配は、矩形、円、線、テキストなどを埋めるために使用することができ
ヒント：の値としてこのオブジェクトを使用しstrokeStyleかのfillStyleプロパティ。
ヒント：使用addColorStop()異なる色を指定する方法を、どこグラデーションオブジェクトに色を配置します。
| JavaScriptシンタックス： | context.createRadialGradient(x0,y0,r0,x1,y1,r1); |
|---|
パラメーター値
| パラメーター | 説明 |
|---|---|
| x0 | 勾配の開始円のx座標 |
| y0 | 勾配の開始円のy座標 |
| r0 | 出発円の半径 |
| x1 | グラデーションの終了円のx座標 |
| y1 | グラデーションの終了円のy座標 |
| r1 | エンディング円の半径 |