CreateJSでcanvasに描画されたオブジェクトの色を変更する方法

CreateJSを用いてcanvasに描画されたオブジェクトの色を変更する方法です。
※ロールオーバー/ロールアウト時にShapeオブジェクトの色を変更します。

javascript

window.onload = function(){

    var stage = new createjs.Stage('canvas');
    stage.enableMouseOver();

    // Shapeオブジェクトを生成
    var shape = new createjs.Shape();
    var rectangle = new createjs.Rectangle(0, 0, 200, 200);
    shape.graphics.beginFill('#333333').drawRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
    // cacheを設定
    shape.cache(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
    stage.addChild(shape);

    shape.addEventListener('rollover', function(e){
        var target = e.target;
        // ColorFilterで色を変更する(R=255, G=0, B=0)
        target.filters = [
            new createjs.ColorFilter(0, 0, 0, 1, 255, 0, 0, 0)
        ];
        // cacheを更新
        target.updateCache();
    });

    shape.addEventListener('rollout', function(e){
        var target = e.target;
        // ColorFilterでデフォルトの色に戻す
        target.filters = [
            new createjs.ColorFilter(1, 1, 1, 1, 0, 0, 0, 0)
        ];
        // cacheを更新
        target.updateCache();
    });

    createjs.Ticker.setFPS(30);
    createjs.Ticker.addEventListener('tick', function(){
        stage.update();
    });

}

• 色の変更にはColorFilterを使用する。
• ターゲットとなるオブジェクトのfiltersプロパティに配列で各フィルターを渡す。
• フィルターはターゲットとなるオブジェクトのcacheメソッドで設定した領域に適応される。
• フィルターはターゲットとなるオブジェクトのupdateCacheメソッドを呼び出す事で適応される。

---

色は下記の計算式で決定される。
適応後(R) = デフォルト(R) * redMultiplier + redOffset;
適応後(G) = デフォルト(G) * greenMultiplier + greenOffset;
適応後(B) = デフォルト(B) * blueMultiplier + blueOffset;
適応後(A) = デフォルト(A) * alphaMultiplier + alphaOffset;
詳しくはColorFilter Classを参照