EaselJSの線形グラデーション
線形のグラデーション
EaselJSでは二種類のグラデーションをサポートしています。今回紹介する線形のグラデーションと円形のグラデーションです。線形のグラデーションはある地点からある地点まで、線状に色を変化させていくグラデーションです。
var g = new Graphics(); //グラデーションを指定して塗る g.beginLinearGradientFill(["#9ef","#9e2"],[0.1,1.0],0,-100,50,100); g.drawCircle(0,0,100); g.setStrokeStyle(5); //グラデーションを指定して境界線を描く g.beginFill(Graphics.getHSL(0,0,0,0)); g.beginLinearGradientStroke(["#9e2","#000","#9ef"],[0.1,0.3,1.0],0,-100,50,100); g.drawCircle(0,0,130);
引数が多い・・・
線形グラデーションはbeginLinearGradientFill関数やbeginLinearGradientStroke関数を使用して実現します。この引数は少しパラメータが多いですね。ですので図にしてみました。
まずは遷移色の指定です。ここには2種類以上の色を指定することが出来ます。次にグラデーションの切替点を指定します。[0.1,1,0]の場合は、開始地点からみて10%の位置からグラデーションさせる、という具合になります。遷移色を3つ指定している場合は、この切替点も3つ必要となりますので注意してください。そして最後に、グラデーションの開始座標と終了座標を指定します。これで斜めのグラデーションも簡単にできますね。
サンプル
Photoshopのグラデーションツールみたいな感じで描けます。引数が多い分、自由度は高いです。