その83。

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.ReverseFilter();
filter.apply(srcBitmap, dstBitmap);
canvas.drawBitmap(dstBitmap, 0, img.height);
}

このリバースフィルタはその79で勉強したモノクロフィルタと呼び出すクラスが違うだけで処理の流れは変わりません。
元の画像は同じものなのに結果が違う画像が生成されるということは違う加工処理をしているということなのですが、クラスを変えるだけで他は同じ不思議！

これは tmlib.js が肩代わりして処理をしてくれているからなのです。
今までのエントリーを読んできてくれた方でしたらご存知だと思いますがこれがライブラリの素晴らしいところですね。

その79と今回とどこが違うのかよく見比べるといいかと思います。
フィルター処理はどのようにしているのか気になる方は tmlib.js 本体のコードを読んでみて下さい。

ちなみにこのリバースフィルタとは「ネガ反転」や「階調反転」と呼ばれます。
階調とは、「色の濃淡の変化のこと、または濃淡変化の滑らかさのことである。」　IT用語辞典バイナリより引用。
まぁ単純に濃いなら淡く、淡いなら濃くするフィルタということですね。

Tweet