HTML5 canvas createLinearGradient メソッド
 HTML5 canvas リファレンス
例
赤と緑のグラデーション塗りつぶし矩形を描画します:
JavaScript:
var canvas=document.getElementById("myCanvas");
var
ctx=canvas.getContext("2d");
var grd=ctx.createLinearGradient(0,0,150,0);
grd.addColorStop(0.3,"red");
grd.addColorStop(0.7,"green");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,100);
Try it yourself »
定義と用法
createLinearGradient メソッドは、ある色から他の色に変わるグラデーションオブジェクトを作成します。
座標パラメータを使用して、どのようどこで変化が起きるかを指定することができます。
x0 と y0 パラメータは、グラデーションの開始座標を表します。
x1 と y1 パラメータは、グラデーションの終了座標を表します。
色の指定とグラデーションにおけるその色の配置場所は addColorStop() メソッド を使用します。
グラデーションは、矩形、円、線のどの描画/塗りつぶしに使用することができます。
| JavaScript 構文: |
context.createLinearGradient(x0,y0,x1,y1); |
ブラウザ・サポート
createLinearGradient メソッドは、主要な全ブラウザがサポートしています。
パラメータ値
| パラメータ |
説明 |
| x0 |
グラデーションを開始する x 座標 |
| y0 |
グラデーションを開始する y 座標 |
| x1 |
グラデーションを終了する x 座標 |
| x1 |
グラデーションを終了する y 座標 |
HTML5 canvas リファレンス
|