初めて学ぶCreateJS

ランダムな塗り色で星形を描く

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
EaselJSのGraphicsクラスには、星形を描くメソッドGraphics.drawPolyStar()が備わっています。このメソッドでランダムな塗り色の星形を描きましょう。
講師:
10:04

字幕

stage に置いた Shape インスタンスに 星型を描いて ロードする度にランダムな色に変わるように してみたいと思います ではロードし直してみましょう 今は緑ですけれども 紫っぽい色になりました またロードし直します 暗くなりましたね 毎回毎回 カラーがランダムに変わります ここでは星型の描き方と ランダムな数値の取り出し方が ポイントになります HTML ドキュメントの script 要素には ここまで JavaScript コードが書いてあります まず最初に読み込まれる初期設定の関数 initialize の中で canvas 要素を取り出し stage を作ったら Shape のオブジェクト インスタンスとも言いますが それを作っています そして stage オブジェクトに加えて 位置調整 それから星型を描くための関数 draw を呼び出し 引数としては Shape オブジェクトの Graphics プロパティ つまり Graphics オブジェクトを 渡しています 呼び出した関数 draw の方は とりあえずオブジェクト Graphics オブジェクトを受け取ったまでで 具体的なステートメントは書いていません ここにステートメントを 書き加えていくことになります そこで星型を描くメソッドについて ご説明します Graphics オブジェクトに 星型を描くメソッドは drawPolyStar です 引数は6つあります 少し多めですね 中心の x 座標と y 座標 それから「山の半径」というのは 中心から 星型の とがったてっぺんまでの長さです 「谷の深さ」というのは 0から1 までの数字で定めます これは図で説明しましょう Graphics オブジェクトに 星型を描くメソッドは drawPolyStar です 引数は6つあります まず中心の x 座標と y 座標 それから中心から 頂点のとがったてっぺんまでの長さ 「山の半径」と呼んでいます それからとんがりがいくつあるか という「頂点数」 「谷の深さ」というのは 0から1 までの値で定めます ちょっと分かり難いかと思いますので 図で説明しましょう 谷の深さが異なる5頂点の星型を 3つ示しました 谷の深さが0の星型を見ると 分かりやすいかと思います 星型ではないですね 5角形になっています 0よりも大きい数値を与えると この頂点の間にへこみというか谷ができます 数値を大きくするほどこの谷が深くなります ただし1より大きい数字は指定できません 1になるともうつぶれてしまって 形が見えなくなります 残る引数の「書き始めの角度」というのは 星型の頂点を どの角度から 書き始めるかということです 0にしますと時計の3時の位置から 星型を描き始めます 星型ってあまりこの水平の位置から 描き始めたら格好良くないですね やはり普通は時計の 12 時の位置から 描き始めたいと思うでしょう その場合には角度として マイナス 90 度数で結構です マイナス 90 を定めます 関数 draw に星型を描く ステートメントを加えましょう まだカラーはランダムにはしません 決まった色にしましょう Graphics オブジェクトに対して beginStroke 線の色を決めます ブルーにしましょう 次は塗り色です beginFill カラーはシアンにします そして drawPolyStar です 中心は x y とも 0 それから半径は 40 頂点数は 5 が格好良いですね 谷の深さは 0.6 ぐらいが ちょうど良さそうです そして頂点描き始めは 12 時の位置 90 度ということで 忘れずに stage の アップデートをします 保存をして確認してみましょう ファイルメニューから ブラウザでプレビューです シアンの塗り ブルーの線で 5頂点の星型が描かれました 次はカラーをランダムにする そのランダムな数値の求め方を考えていきます ランダムな数値を求めるために使うのは Math.random() 関数です ただしこの関数が返すのは 0から1までのランダムな少数値です けれどカラー値というのは 黒の 0 から 白の F6 桁 16進数の F6 桁― 整数で言うと1千6百万以上の数字になります そこで Math.random() 関数の返した値に F6 桁の数値を掛け算します JavaScript では頭に 0x を付けると 数値を 16 進数で指定することができます ですからこれは整数のその 1千6百万以上の値です これを掛け算すれば 値の範囲は 0 から白 F6 桁までの ランダムな値になりますが ただし少数値です カラーというのは整数で定めますよね Math.floor() 関数を使うと 小数点以下の値を切り捨ててくれます これで 0 から F6 桁までの ランダムな整数の値が取り出せます ところが1つ問題があります というのは beginFill メソッドの引数には 整数を指定するのではなくて 文字列― ダブルクオーテーションで括っている というのは文字列なんですが 文字でなければいけません では整数という数値をどうやって 文字に変えたらよいか これは実は Graphics クラスに とても便利なメソッドがあります それをご紹介しましょう カラーの整数値を文字に変えてくれる Graphics クラスのメソッドというのは getRGB というものです ただしこのメソッドは 他の Graphics オブジェクトに対して 呼び出したメソッドと異なり GraphicsObject.(ドット) という形ではなく 直接 createjs.Graphics.getRGB の形で呼び出します このように Object. ではない形 いきなりクラスで呼び出すようなメソッドのことを 「静的」 静かという字を書いて 静的なメソッドというふうに呼びます 塗り色をランダムに定めてみたいと思います まずは整数で求めます randomnumber ということで Math.floor( の Math.random() の 掛けることの 0x 16 進法です FFFFFF で括弧を閉じます これは整数ですので 整数を文字に変えます randomColor としましょう createjs. Graphics. の getRGB ということで ここに整数値を入れます コピーですね 文字列に変えた変数値を beginFill に定めます 保存しましょう ではブラウザで確認します ファイルメニューから ブラウザでプレビューです ブラウザの canvas に 微妙な色の星型が描かれました おそらくランダムに 決まっているんだと思います 試しにリロードしてみましょう 色が変わりますね リロードする度に色が変わっていますので 無事にランダムなカラーが 設定されていることが分かりました このサンプルでは二つのことを学びました まず一つは星型を描く drawPolyStar の使い方です 二つ目はランダムなカラー値を定める方法です メソッドとしては Math クラスの random と floor それから定数を文字列のカラーに変換する Graphics.getRGB メソッドです

初めて学ぶCreateJS

このコースではCanvasへの簡単な描画からTweenJSによるトゥイーンアニメーション、PreloadJSでの外部画像ファイルの読み込みやSoundJSでのサウンドの再生などのさまざまな種類のスクリプティングについて解説します。さらにEaselJSでのマウスによるインタラクティブな操作やフィルタを使った動的な表現なども紹介します。

3時間31分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年02月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。