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

その69。

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編

今回試すサンプルは「影(shadow)」の「影のスタイルを一括で指定しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
赤の矩形の影が右下に描画されたと思います。

/*
* 定数
*/
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();

// 影情報を一括設定(color, offsetX, offsetY, blur)
canvas.setShadow("blue", 10, 10, 20);

// 四角形を描画
canvas.fillStyle = "red";
canvas.fillRect(100, 100, 300, 200);
};

今回勉強するのは16行目になります。

16行目

その64その65その66その67で勉強した影、色、X方向調整、Y方向調整を1行で指示するメソッドになります。
パラメータとしては「 .setShadow( coloroffsetXoffsetYblur ); 」という順番になっています。

color 影の色
offsetX X方向の調整
offsetY Y方向の調整
blur 影の大きさ(ぼかし効果のサイズ)

サンプルで言いますと、
影の色は青、X方向に10移動、Y方向に10移動、影の大きさは20
ということになります
処理によって一度に指示したほうがいい場合と個別に指示したほうがいい場合があると思いますのでそれがいつなのか考えてみるとおもしろいことが出来そうですね。


コメントを残す

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