その81。

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

今回も勉強するのは25～28行目になります。
その80で勉強した内容と変わりません。
カラーマトリクスで指示しているパラメータが緑に変わっただけです。

25～28行目

その80では25行目のパラメータで赤を指示していましたが、今回は緑ですので26行目の値が変わっていますね。
たったこれだけで色を変えることが出来るので便利ですよね。
それぞれの値を変えると何がどう変わるのか試してみると記憶に残っていいかもしれません。

その80との変更点が少ないので今回はこれくらいで。

Tweet