「tmlib.js 怒濤の 100 サンプル!!」を試す その85

その85。

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

今回のブラーフィルタも基本はその79で勉強したモノクロフィルタと処理の流れは変わりませんがパラメータを指示できます。
ブラーフィルタは平たく言えば「ぼかし効果」と言うことになります。それを踏まえた上でパラメータを説明します。

左から順番にX方向のぼかし具合、Y方向のぼかし具合、ぼかしをかける回数となります。
ですのでX方向に6、Y方向に6、左のぼかし具合を1回という意味になります。
サンプルではX,Y同じ量だけぼかしてますので全体的にぼけているように見えます。
これをX方向だけ40とすると横に間延びしたようにぼけてみえるはずです。

ぼかしをかける回数ですが、X,Yのぼかし具合を2回、3回とかけるということになります。
指示しない場合はデフォルト値である1回が適用されます。
このパラメータは値を大きくすればするほど処理回数が増えて描画されるまでに時間がかかり重くなります。
ぼかし量も多すぎると重くなりますが自分で色々試した結果こっちのほうがはるかに重くなります。
特に必要がなければデフォルト値の1回でいいように思います。

ブラーフィルタの使い道は多いと思いますが使い過ぎるとブラウザが悲鳴をあげそうですので要注意かもです。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です