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

その33。

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

今回試すサンプルは「色, グラデーション(Color, Gradient)」の「円形グラデーションを指定してみよう」です。
ではサンプルが掲載されているのでまずは見てみましょう。
中央のボタンを押してみて下さい。
円形のグラデーションが描画されたと思います。

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

// 円形グラデーション
var radialGradient = tm.graphics.RadialGradient(200, 200, 0, 200, 200, 150);
radialGradient.addColorStopList([
{ offset: 0.0, color: "hsl(  0, 75%, 50%)" },
{ offset: 0.5, color: "hsl(120, 75%, 50%)" },
{ offset: 0.9, color: "hsla(240, 75%, 50%, 0.2)" },
{ offset: 1.0, color: "hsla(240, 75%, 50%, 0.0)" },
]);
canvas.setGradient(radialGradient);
// 円形描画
canvas.fillCircle(200, 200, 150);

今回勉強するのは16~25行目です。 1行づつ行きます。

16行目

tm.graphics の中の RadialGradient というクラスを生成しています。
パラメータは順番に( x0,  y0,  r0,  x1,  y1,  r1 )となります。

x0 グラデーション開始円のX座標
y0 グラデーション開始円のY座標
r0 グラデーション開始円の半径
x1 グラデーション終了円のX座標
y1 グラデーション終了円のY座標
r1 グラデーション終了円の半径

開始の円から終了の円までの範囲をグラデーションします。
ですのでサンプルでは開始円も終了円もX座標200、Y座標200で同じなので半径の差がグラデーション範囲となります。
半径0の円から半径150の円までということですね。
お金の5円硬貨を思い浮かべるとわかりやすいかもしれません。
硬貨の穴を限りなく小さくしたのがサンプルということです。

17~22行目

「 addColorStopList 」というメソッドで色や色の位置を指示しています。
その32の線形グラデーションの時と違うのはリストで指定していることです。
線形の時は色を変更する位置で一つ一つ指示していましたが、円形の場合はリスト化して指示する必要があります。
グラデーションの計算式が円形と線形では違うからだと思われます。
逆に線形にリスト化したものを円形に一つ一つ指示したものでは描画されません。

リスト化してもパラメータの指定方法はその32の線形と変わりません。
パラメータは順番に(色の位置、色指定)となっています。
色の位置 」とはグラデーションの開始位置を「 0 」、終了位置を「 1 」として指定します。
色指定 」は希望の色を指定することです。
「 hsl 」や「 rgb 」で色の指定することが出来ますので処理に合わせて使い分けてください。
忘れた方はその32を参照して頂くか検索して調べてみて下さい。

23行目

17~22行目で決めたグラデーションの詳細を 「 setGradient(radialGradient) 」としてセットしています。
canvas 」に対してセットしていますので 「 canvas 」に描画される塗りつぶしの矩形や円形は全てグラデーションが適用されることになります。

25行目

16行目で指定したグラデーション範囲が「 RadialGradient(200, 200, 0, 200, 200, 150) 」でしたね。
これに合わせて円を描画しないと重なった部分しかグラデーションが適用されませんので気をつけて下さい。
グラデーション範囲である「 200, 200, 150 」の位置に円を描画しています。
中心位置も半径も同じなので綺麗にグラデーションされた円が描画されるというわけです。
円のX座標やY座標を弄ると一部見えなくなるので理解できると思います。


コメントを残す

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