JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト

EaselJSでの色指定

EaselJSではCSS記法の色指定の他、二種類の色指定をサポートしています。今回はその色指定方法について書いてみたいと思います。

カラーコードによる指定

おなじみのカラーコードによる指定方法です。一般的なのですが、透明度(アルファチャンネル)の指定はできません。その為、利用シーンが限られる場合があります。

g.beginFill("#800000");

カラーネームによる指定

CSSと同じようにカラーネームによる指定ができます。この記法も透明度の指定はできません。可読性は高いですが、最も応用の利かない方法です。

g.beginFill("white");

べた書きRGB指定

べた書きでrgbを指定します。rgbaで指定すれば透明度が指定できるという点で上記2つの方法より優れていると言えます。ですが、最終的にこの形式の文字列を作らなければならないので、動的な色指定をしたい場合ちょっと面倒です。

g.beginFill("rgba(100,200,0,0.5)");

getRGBによる指定

EaselJSに用意されている関数です。数値としてrgbaの各値を渡すため、動的な色指定に優れています。勿論透明度の指定もできます。

g.beginFill(Graphics.getRGB(220,0,50,0.5));

getHSLによる指定

これもEaselJSに用意されている関数です。HSL名前空間を使用します。HSL色空間は色と彩度、輝度を用いて色を表現する色空間です。透明度の指定もできます。モーショングラフィック系のjsを組む場合はこちらの方が色々と使いやすいでしょう。僕が最もレコメンドする方法です。

g.beginFill(Graphics.getHSL(180,50,50,0.5));

実行結果

ということで、上記色指定のサンプルコードを組んでみました。HSL色空間は最初は使いにくさを感じるかもしれませんが、一度覚えたらすごく便利なので、HSL色空間を使用する癖をつけてみてください。