その67。
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
今回試すサンプルは「影(shadow)」の「影のオフセット Y 値を指定しよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
赤の矩形の影が下寄りに描画されたと思います。
/*
* 定数
*/
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();
// 影を指定
canvas.shadowBlur = 20;
canvas.shadowColor = "black";
canvas.context.shadowOffsetY = 10;
// 四角形を描画
canvas.fillStyle = "red";
canvas.fillRect(100, 100, 300, 200);
};
今回勉強するのは18行目になります。
18行目
「 shadowOffsetY 」
影の位置をY方向に調整するプロパティです。
その66でX方向のプロパティは勉強しましたね。
今回はX方向からY方向に変わっただけですので楽勝ですね！
デフォルト値は「 0 」で矩形と重なっているような状態すのでサンプルのように「 10 」と指示すると矩形より下に移動し、マイナスの値を指示すると上に動きます。
重なっている状態と表現しましたがこれは影を描画するのに基準となるものがという意味です。
影自体はこの基準となるものから16行目で指示している値だけ描画されます。
光源の動きと合わせて影を動かすなんてことも出来そうです。
