CreateJS実践講座

描画の処理を関数として定める

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Graphicsオブジェクトに円を描く処理は関数にすると使い回しやすくなります。
講師:
03:55

字幕

このレッスンでは 描画の処理を ファンクションとして定義します 「円を描く」 という処理があります これをファンクションとして 別に定義することによって 例えば 複数の円を描きたいとか 前の円を消して 新しい設定で円を書き直したい時にも 柔軟に対応することができます Dreamweaver で開いた html ドキュメントは 円を描くという 処理そのものは出来ています 作った Shape オブジェクトの graphics プロパティから Graphics オブジェクトを取り出して 塗り色を決め blue (ブルー) です それから drawCircle メソッドで 中心から 70 ピクセルの 半径の円を書きます ということで 円を書く処理は出来ていますが 関数にはなっていません 現在の結果を確認します 「ファイル」メニューから 「ブラウザでプレビュー」しましょう 青い円は描けています この処理は良いので この処理をファンクションとして 切り出すことになります ファンクションの名前は 「 draw 」としましょう これから定義するのですが 定義を先に書くよりも どういう風に使いたいのかという 呼び出し方を決めた方が分かりやすいです 「 draw 」という ファンクションにします そして 何を渡すかというと Graphics オブジェクト Shape の graphics プロパティを渡して それに対して絵を描いてもらう と言うかたちにします これをコピーして持っていきます 半径も決められるようにしましょう 70 ということで 今 ここでは 70 と 決め打ちになっていますが ファンクションを 定義できたあかつきには ここに指定する数字を変えれば いろんな大きさの円が描けます この部分はコメントアウトしまして function draw という名前で 定義をします 受け取るのは Graphics オブジェクトですが 引数の名前も同じ名前にしておきましょう 「 myGraphics 」 これをコピーします それから半径 これは引数の変数を定めて radius としましょう これらを使って 円を描くわけですが その部分の処理は もうここにあります ですから これを持ってきてしまえば良い ということになります 移動してしまいましょう ここは 70 と 決め打ちではなくて radius と 引数で貰った値を使って その半径の円を描きます 一旦これは消して 確認してみましょう 「ファイル」を「保存」したら 「ブラウザでプレビュー」です 結果は変わりませんけれども ファンクションを呼び出して 円が描かれています このレッスンでは Graphics オブジェクトに対して 円を書くという処理を 関数として定義しました 関数の名前は draw です これをここで呼び出しているわけです この関数に対して 円を描いてもらうための Graphics オブジェクトは Shape の graphics プロパティから 取り出します それから半径を指定するということで この Graphics オブジェクトと 半径を使って円を描くという 処理を行います beginFill で塗りを指定して それから drawCircle 中心は 0,0 (ゼロ、ゼロ)に 決まっていますけれど 貰った radius (半径)の値を使って 円を描きました

CreateJS実践講座

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

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

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

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

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