その80。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「ピクセル操作」の「レッドフィルターを適応させてみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
カラーと赤で女の子が描画されたと思います。
/*
* 定数
*/
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT= 465;
tm.main(function() {
// canvas インスタンス生成
var canvas = tm.graphics.Canvas("#world");
// 幅, 高さを指定
canvas.resize(SCREEN_WIDTH, SCREEN_HEIGHT);
// 画面にフィットさせる
canvas.fitWindow();
// 画像
var img = new Image();
img.src = "URL省略";
img.onload = function() {
canvas.drawImage(img, 0, 0);
// レッドフィルタ
var srcBitmap = canvas.getBitmap(0, 0, img.width, img.height);
var dstBitmap = tm.graphics.Bitmap(img.width, img.height);
var filter = tm.graphics.ColorMatrixFilter([
255, 255, 255, 255, 0,
0, 1, 0, 0, 0,
0, 0, 1, 0, 0,
0, 0, 0, 1, 0,
]);
filter.apply(srcBitmap, dstBitmap);
canvas.drawBitmap(dstBitmap, 0, img.height);
};
});
}
今回勉強するのは24～29行目になります。
他の行に関しては基本的にはその79で勉強した内容と変わりません。
24行目
モノクロフィルターのときはクラスを生成してそのまま適用させればよかったのですが、カラーだと何色を適用させるかを指示する必要があります。
まずはカラーフィルタークラスを生成します。
25～29行目
この行間のパラメータで色を指示しています。
まぁ正直よくわからないと思います。僕もそうです。
プログラムで画像の色を変えたりするときはよく使われているようです。
詳しくは説明できませんが、カラーマトリクスと呼ばれるRGBを調整する方法で25行目で赤(R)、26行目で緑(G)、27行目で青(B)の色を表現しています。
赤の行だけでも細かく値を指示することができ、濃淡の表現することができます。
28行目は透明度（α）となります。
詳しく知りたい方は以下のサイトが参考になると思います。
http://umezo.hatenablog.jp/entry/20090122/1232627694
http://hakuhin.jp/as/color.html#COLOR_02
個人的には赤、緑、青の3パターンだけ覚えておいて必要になったときに詳しく勉強したらいいんじゃないかと思ってます。
3パターンだけならサンプルそのままでいいですしね。
代替手段として重くはなりますが、色違いの画像に差し替えるなんてのもなくはないかなと。
