初めて学ぶCreateJS

ベクターグラフィックスを描く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Shapeインスタンスから取出したGraphicsオブジェクトに、塗りと線のついた円を描いてみます。
講師:
05:27

字幕

Shape オブジェクトに ベクターグラフィクスの円を描く方法を ご説明します まず Shape オブジェクトに 直接 絵は描けません Shape オブジェクトが持つ Graphics オブジェクトを 取り出す必要があります そのためには Shape オブジェクトの プロパティ graphics で Graphics オブジェクトを取り出します Graphics オブジェクトを取り出したら それに対してメソッドを適用して 描画をすることができます まず 線のカラーを定めるのが beginStroke Graphics オブジェクトに対して beginStroke でカラー値を指定します 塗りの場合は 同じく Graphics オブジェクトに beginFill でカラーを指定します そして 今回は円を描きたいと思います その場合には drawCircle というメソッドです 中心の X, Y 座標と半径を 引数として定めます この html ドキュメントの script 要素には 初期化の関数が定められています そこでは canvas 要素を取り出して そこに Stage オブジェクトを作り 子どもの Shape インスタンスを Stage オブジェクトに加えています その上で draw という関数を呼び出し Shape オブジェクトを入れた変数を 引数に渡しています この 関数 draw は 引数に Shape オブジェクトを受け取って まだ 内容がありません 関数 draw に円の Shape を描くための ステートメントを加えていきます まず Graphics オブジェクトを Shape オブジェクトから取り出します 引数に 受け取った Shape オブジェクトの graphics プロパティですね そうしたら この Graphics オブジェクトに対して 順に設定を加えます まず 線の塗りです 線のカラーですね beginStroke のメソッドで カラーは #0000FF (ブルー)にします 同様に 今度は塗りですね 塗りのカラーを定めます (キーボードを打つ音) 色はシアンにしました そうしたら いよいよ円を描きます drawCircle 中心の X, Y 座標 そして 半径です では 保存して確認してみましょう メニューの「ファイル」> 「ブラウザでプレビュー」を行ないます Canvas には何も現れません 実は もう1つだけ ご紹介していないメソッドを呼び出すという― ステートメントが必要なんです それを加えましょう Canvas そのものは アニメーションの機能を持っていません そのため 画面に一生懸命 描画のメソッドを使って描画を書いても それを画面に反映するという処理は 別途 命令しないといけないんです それは Stage オブジェクトに対する update というメソッドになります それを 描画し終わった後 加えます Stage の変数に対して update です 保存して もう一度 確かめてみたいと思います 「ファイル」> 「ブラウザでプレビュー」します 今度は ちゃんとシアンの塗りで 青い線の円が描かれました ただし ちょっと場所が気になりますね 中心座標を (0, 0) にしました (0, 0) というのは Stage 或いは Canvas と言い換えても良いのですが その左上隅になります この位置を ちゃんと 円が全部見えるように動かしましょう 描かれる円の位置を変えるには 1つは drawCircle メソッドに渡した 中心座標をずらすという方法があります けれども もう1つ この円を描いている Shape オブジェクト自体を 動かしてしまうという方法があります こちらを取りましょう myShape をコピーして X 座標は文字通り x です これを 例えば 100 にしましょうか 同様に Y も 100 とします コピーを使っちゃいましょう もう一度 ブラウザで確かめてみましょう 保存をしたら 「ファイル」>「ブラウザでプレビュー」です 今度は 円が全て画面に現れました 今回 Shape オブジェクトを 動かしましたので Shape オブジェクトの原点は 中心にあるままです アニメーションで扱う時には オブジェクトの原点は中心に持っておいた方が 扱いやすいことが多いです Shape オブジェクトから Graphics オブジェクトを取り出し そして 円を描く手順についてご説明しました Stage オブジェクトに対する update メソッドの呼び出し これも忘れないようにしてください

初めて学ぶCreateJS

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

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

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

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

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