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