その68。

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

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

/*
* 定数
*/
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.shadowOffsetX = 10;
canvas.context.shadowOffsetY = 10;

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

今回勉強するのは18～19行目になります。

18～19行目

その66とその67で勉強したものの復習と言った感じです。

「 shadowOffsetX 」　影の位置をX方向に調整する
「 shadowOffsetY 」　影の位置をY方向に調整する

行は違いますが、1つの影に対して同時に指示することが出来るということですね。
ですので影の位置が右下に移動しているわけです。
矩形を描画する前でしたらどちらが先に指示しないといけないということもないので好みや処理に合わせで記述していいようです。

Tweet