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関数を使用して実現します。この引数は少しパラメータが多いですね。ですので図にしてみました。

easeljs10_figure

まずは遷移色の指定です。ここには2種類以上の色を指定することが出来ます。次にグラデーションの切替点を指定します。[0.1,1,0]の場合は、開始地点からみて10%の位置からグラデーションさせる、という具合になります。遷移色を3つ指定している場合は、この切替点も3つ必要となりますので注意してください。そして最後に、グラデーションの開始座標と終了座標を指定します。これで斜めのグラデーションも簡単にできますね。

 

サンプル

Photoshopのグラデーションツールみたいな感じで描けます。引数が多い分、自由度は高いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  プロフィール  PR:無料HP  北播ドライビングスクール  売掛金買取 制度  アニメクリエイター 専門学校  ショーワ  中古ホイール 富山  タイヤ マーチ 格安  レコーディング 専門学校  タイヤホイールセット  天然石とパワーストーン  栄養士 短期大学  TMJ投資顧問  カローラ 中古  バイアグラ 通販