その64。
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 = "black";
// 四角形を描画
canvas.fillStyle = "red";
canvas.fillRect(100, 100, 300, 200);
};
今回勉強するのは16、17行目になります。
16行目
「 shadowBlur 」に、ぼかし効果のサイズを指示します。
効果範囲と言い換えてもいいかもしれません。
サンプルですと「 20 」が指示されていますので「 20 」の範囲にぼかし効果が適用されます。
17行目
次回の内容と同じになってしまいますが難しくないので一緒に説明します。
「 shadowColor 」には影の色を指示できます。
シャドウカラーですからそのままの意味ですね。
サンプルでは「 “black” 」と指示されていますが、色の指示方法はHSLでもRGBでも出来ますので処理に合わせて選んでください。
この影があるなしで見た目の印象が結構変わります。
「ドロップシャドウ」で検索するとPhotoShopのチュートリアルが沢山出てきますがそれぞれ印象が違いますので調べてみて下さい。
