その32。

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 linearGradient = tm.graphics.LinearGradient(50, 10, 200, 400);
linearGradient.addColorStop(0.0, "hsl(  0, 75%, 50%)");
linearGradient.addColorStop(0.5, "hsl(120, 75%, 50%)");
linearGradient.addColorStop(1.0, "hsl(240, 75%, 50%)");
canvas.setGradient(linearGradient);
// 四角形描画
canvas.fillRect(50, 20, 200, 400);

今回勉強するのは16～22行目です。
ちょっとややこしいので1行づついきます。

16行目

tm.graphics の中の LinearGradient というクラスを生成しています。
パラメータは順番に（始点X座標、始点Y座標、始点からのX方向距離、始点からのY座標距離）となります。
矩形描画と同じように始点からの相対距離で終点を決めグラデーションの描画方向を決めています。

あくまでグラデーションの描画方向だということを覚えておいてくださいね。
生成されたクラスを変数として「 linearGradient 」に設定しています。

17行目

「 linearGradient 」に対して「 addColorStop 」というメソッドで色や色の位置を指示しています。
パラメータは（色の位置、色指定）となっています。
「 色の位置 」とはグラデーションの開始位置を「 0 」、終了位置を「 1 」として指定します。「 0.0 」なので開始位置となりますね。
「 色指定 」は希望の色を指定することですが、サンプルでは「 “hsl(240, 75%, 50%)” 」となっています。
「 hsl 」とは色の指定方法の1つで「 色相 」「 彩度 」「 輝度 」を用いて指定します。
詳しくはwikiを見て頂くとして「 rgba 」でも指定できますので希望に合わせて使い分けてください。
ちなみに赤を指定してます。

18行目

「 色の位置 」が「 0.5 」なので真ん中に、「 “hsl(120, 75%, 50%)” 」（緑）を指定しています。

19行目

「 色の位置 」が「 1.0 」なので終了位置に、「 “hsl(240, 75%, 50%)” 」（青）を指定しています。

20行目

17～19行目で決めたグラデーションの詳細を
「 setGradient( linearGradient ) 」としてセットしています。

その30で勉強した「 fillStyle() 」と同じように「 canvas 」に対して
「 setGradient( linearGradient ) 」でセットしていますので
「 canvas 」に描画される塗りつぶしの矩形や円形は全てグラデーションが適用されることになります。

22行目

上記のグラデーションが適用された矩形が描画されます。

グラデーションの終点を変えることによって斜め、縦、横のグラデーションを作ることができます。
上手く説明しにくいですが図表にしてみました。

わからない時はコメントでご質問ください。

Tweet