その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行目
上記のグラデーションが適用された矩形が描画されます。
グラデーションの終点を変えることによって斜め、縦、横のグラデーションを作ることができます。
上手く説明しにくいですが図表にしてみました。
わからない時はコメントでご質問ください。
とても勉強になるページありがとうございます!
一番最後に
});
を入れないと、コピペしたときにエラーになるかと思いましたm(_ _)m