CreateJS実践講座

塗り色をランダムに定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ランダムな色の整数値をGraphicsクラスのメソッドで文字に変えたうえ、塗り色として定めます。
講師:
05:12

字幕

このレッスンでは 塗りの色をランダムに定めます 今 画面に星形が描かれていますけれども 青い色です これをロードしなおします 暗くなりました 薄くなりました 青系から変わらないですね... もう一回くらい あ!緑になりましたね ランダムなので何が出てくるのが 想像がつかないのですが 何とか赤系が出てこないでしょうか? 出てきました ということでランダムな カラーが定められています この設定の仕方について ご説明します Dreamweaver で開いた html ドキュメントは 星形を描く関数が 定められています 但し 線がブルー 塗りがシアンということで 固定のカラーになっています この塗りの方をランダムにしたいわけです 今現在 星形に描かれたものを 確認してみましょう 「ファイル」から 「ブラウザでプレビュー」です 線はブルー 塗りはシアンになっています 線のブルーはこのままにして 塗りのシアンの部分を ランダムなカラーにします Dreamweaver に戻りましょう まず ランダムな数値を求めます これは CreateJS に限りません JavaScript コード共通です 変数を入れます random ― 整数ですので randomInt としておきます まず一般的にランダムな数を求めるには JavaScript のコードで Math クラスの random という関数を使います この関数は 0 ~ 1 の数値を ランダムに出します 欲しいのは 0 (ゼロ)~ FFFFFF = 白です ということで その数を掛け算します 16 進法ですから 0x を頭に付けてFFFFFF これで 0 から白まで つまり 黒から白までの ランダムな数値が出ます 注意は整数でなければいけませんので 小数点以下を切り捨てます この切り捨ても Math クラスの floor という関数になります これで 0 ( = 黒)から FFFFFF ( = 白)までの ランダムな整数が求まりました ただ CreateJS に指定するカラーは 文字です html と同じです ですから 文字にしないといけません どうしたら良いか悩むかもしれませんが ちゃんと関数が用意されています 文字になった rancomColor (ランダムなカラー)という 変数を用意して どうするかというと createjs の Graphics クラス getRGB というメソッドがあります ここに整数を渡すと その整数に対応したカラーの 文字が返ってくるので この変数の整数値です 整数値が入った変数をここに持っていきます コピーして持ってきます これで文字になりましたから この文字になったカラーを 塗り色に指定します もう文字になっていますから " " は要りません " " ごと変数に書き換えます 1つ 綴りミスがあります Graphics は -hics です これで確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します 紫っぽい色になりました ロードしなおしましょう 茶色っぽい黄色になりました きれいなグリーンですね ちょっと暗くなりました なんだか青系が多いような 気がするのですけども ランダムになっているはずです ちょっと紫っぽくなりました 赤系が出てきました ランダムなカラーが 設定されたということです このレッスンでは Shape オブジェクトに描く 星形の塗り色を ランダムに定めました 定め方は2段階です まず 整数としてランダムな数値を取ります そのためには JavaScript の Math クラスの random メソッド これは 0 ~ 1 の数字ですので 0xFFFFFF 白を掛け算して まず 0 ( =黒)から白までの小数値を求め 今度は小数を Math.floor メソッドでカットします これでランダムなカラーの 整数値がとれましたので それを文字列に変えるために CreateJS のGraphics クラスの getRGB というメソッドを使って そこで文字に変換されたカラーを beginFill メソッドの引数に当てました

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

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

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

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

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