HTML5 canvas createRadialGradient メソッド
HTML5 canvas リファレンス
例
赤のグラデーションで塗りつぶした円を描画します:
JavaScript:
var canvas=document.getElementById("myCanvas"); var
ctx=canvas.getContext("2d"); var
grd=ctx.createRadialGradient(100,50,5,60,50,50);
grd.addColorStop(0,"red"); grd.addColorStop(1,"white");
ctx.fillStyle=grd; ctx.fillRect(0,0,150,100);
Try it yourself »
定義と用法
createRadialGradient メソッドは、指定のパラメータを使用して、円形のグラデーションオブジェクトを作成します。
x0 と y0 は、半径が r0 の、開始円の中心座標を表します。
x1 と y1 は、半径が r1 の、終了円の中心座標を表します。
色の指定とグラデーションにおけるその色の配置場所は addColorStop() メソッド を使用します。
gradient can be used to draw/fill rectangles, circles, lines etc.
JavaScript 構文: |
context.createRadialGradient(x0,y0,r0,x1,y1,r1); |
ブラウザ・サポート
createRadialGradient メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
パラメータ |
説明 |
x0 |
グラデーションを開始する円の x 座標 |
y0 |
グラデーションを開始する円の y 座標 |
r0 |
グラデーションを開始する円の半径 |
x1 |
グラデーションを終了する円の x 座標 |
y1 |
グラデーションを終了する円の y 座標 |
r1 |
グラデーションを終了する円の半径 |
HTML5 canvas リファレンス
|