その65。
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();
// 影を指定
canvas.shadowBlur = 20;
canvas.shadowColor = "yellow";
// 四角形を描画
canvas.fillStyle = "blue";
canvas.fillRect(100, 100, 300, 200);
};
今回勉強するのは16、17行目になります。
その64で勉強した内容と同じになります。
16行目
「 shadowBlur 」に、ぼかし効果のサイズを指示します。
効果範囲と言い換えてもいいかもしれません。
サンプルですと「 20 」が指示されていますので「 20 」の範囲にぼかし効果が適用されます。
17行目
これもその64と同じですね。
「 shadowColor 」には影の色を指示できます。
シャドウカラーですからそのままの意味ですね。
サンプルでは「 “yellow” 」と指示されていますが、色の指示方法はHSLでもRGBでも出来ますので処理に合わせて選んでください。
黄色の影ですと透明度も合わせて調整したら後光のような表現が出来ますね。
