CreateJS実践講座

Shapeオブジェクトに円を描く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Shapeオブジェクトから取出したGraphicsオブジェクトに円を描きます。
講師:
05:04

字幕

このレッスンでは stage に置いた shape オブジェクトに円を描いてみます shape オブジェクトには 絵を描くことができます stage に shape オブジェクトを置いて そこにスクリプトで様々な形を描く事ができます ここでは青い円を描いてみたいと思います Dreamweaver で開いた HTML ドキュメントは まだ何も shape に絵が描かれていません けれども stage オブジェクトを作り shape オブジェクトを作って stage にaddChild メソッドで shape を加えています まだ何も書かれていないので alart で stageのnamChildren 子供の数を表示することで実際にshapeが 加えられたかを確認しています では一回それを見てみましょう ファイルメニューから ブラウザでプレビュー です 子供の数‟1”と出ましたので shape オブジェクトが stage の 子供として加わったことが分かります shape オブジェクトへの描画は shape オブジェクトの グラフィックスプロパティに対して行います ですから そのグラフィックスプロパティを 得るための変数を作ります my graphics としましょう そして my shape が shape オブジェクトが入った変数ですね これをコピーして graphics オブジェクトを取り出します 手順は2つあります 描画のソフトなどで 例えば円を描こう といった時にどうするかと言うと カラーを設定します それから楕円ツールとかのツールを選んで 楕円を描きますね あるいは円を描きます 同じことです まず最初はコピーした graphics オブジェクトの変数をペーストしましょう Ctrl + V もしくは command + V でペーストします そして塗りの設定です 塗りの設定は beginFill fill というのは塗りの意味です そしてその中にカラーを指定します これは HTML で CSS などで指定するのと同じなのでblue と これでブルーのカラーが設定されました 塗り色です 次にまたペーストします そして楕円ツールで円を描くのと 同じ操作なんですけれども drawCircle です これには引数がありまして まず 中心座標を どうしようかということですが 真ん中にしたいので 今キャンバスは幅が 240×180 になっています ですから真ん中というのは この半分ですね 120 の 90 と あともう一つだけ円の半径を定めます 70 ピクセルということにしたいと思います これで保存して確認してみましょう 保存をしてブラウザーでプレビューです アラートが出てしまいましたね アラートは消しましょう 後で 円が描かれない これは一つ注意が必要です Dreamweaver に戻りましょう 実はキャンバスというのはアニメーションを するための機能ではありません 絵を描くための機能です という事なので 絵をもう一回描き直しなさい あるいは 新しい絵を描いたから それを更新してくださいというのは いちいちお願いをしないといけないんです 逆に描画というのは比較的重い処理に なりますので勝手に描画されても困ります ということで今 円を描いたから この円を画面をリフレッシュして 描画してくださいという命令が必要になります アラートはいりませんので これを消してしまって 代わりにそのメソッド 命令を入れましょう stage に対して .update です これを必ず実行しないと 画面の書き換えが行われません ですから これで保存をして もう一度ブラウザーで見てみましょう ブラウザーでプレビューです 今度は青い円が描かれました このレッスンでは stage に加えた shape オブジェクトに青い円を描画しました そのためにはまず shape の graphics という property から graphics のオブジェクトを取り出します そして塗り色の設定は beginFill メソッド そしてカラーを指定します 次に円を描く drawCircle というメソッドで 引数は中心座標と半径です そして忘れてはいけないのは 描画を更新してくださいという stage に対して update というメソッドを 呼び出すことです

CreateJS実践講座

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

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

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

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

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