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を参照