CreateJS実践講座

Shapeオブジェクトに星形を描く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Graphicsクラスのメソッドを使って星形を描き、アウトラインを加えます。
講師:
04:52

字幕

このレッスンでは Shape オブジェクトに星形を描きます EaselJS の Graphics クラスには 星形を描くためのメソッドが用意されています これが その星形なのですが 星形の塗りの他に線も引いてあります アウトラインが引いてあります この線の設定についても ご説明します Dreamweaver で開いた html ドキュメントは 星型でなく 円を描いています これがその関数です 受け取った Graphics オブジェクトに対して beginFill メソッドで 色の青を指定し そしてdrawCircle メソッドで ( X , Y ) 座標 ( 0 , 0 ) を原点として 引数で受け取った半径で円を描きます 現在描かれている円を確認しましょう 「ファイル」メニューから 「ブラウザでプレビュー」です Stage に青い円が描かれました これを星形にしたいと思います 星形を描くメソッドは Graphics クラスの drawPolyStar() というメソッドです 引数がちょっと多いです ( X , Y ) 座標は中心座標で 半径を指定するのは drawCircle と同じです その後にまだ3つ引数があります 頂点数は星形の尖った頂点の数です 谷の深さは分かりにくいと思いますので これは飛ばして 起点角 星をどこから書き始めるかです 通常は時計の 12 時の位置から 描き始めると思います これは ( X , Y ) 座標系で言いますと X 軸方向の正の方向が 0 度になりますので 12 時の方向は -90 度です ですから 普通に星を描く時は 起点角は -90 とします そして 谷の深さです 3つの例を出しました 数字が3種類になっています 谷の深さと言うのは てっぺんに対して落ち込む部分 これがどれくらい深く落ちるか ということです 一番右の 0 (ゼロ)の場合 谷が全く無いということで 五角形になってしまいます 左側は 0.8 です かなり谷が深いですね 1 にしますと完全につぶれます ですから 谷の深さは 0 から 1 の 間の数字を指定します そして 大体 塩梅が良いのが 0.6 ということになります 今 円を描いている関数 draw を 星形を描くように書き換えましょう メソッドは drawCircle ではなく drawPolyStar というメソッドです 中心座標 ( X , Y ) は ( 0 , 0 ) 半径は radius ここは変わりません この後に引数がまだ加わります 5頂点の星が 一番恰好が良いと思います 谷の深さは 0.6 くらいが良かったですね 時計の 12 時の方向から描くのでしたら -90 を指定します これで保存しましょう そして確認します 「ブラウザでプレビュー」です 5頂点の星形が出来上がりました 今 星形には beginFill で 塗りしか指定されていませんけれども これにアウトラインの 線を加えることにしましょう そして 塗り色を少し薄くします cyan (シアン)として 線の太さを決めるのは やはり myGraphics Graphics オブジェクトに対して beginStroke です 塗り色の指定の仕方は beginFill と一緒です こちらの方をブルーにしましょう blue とします では 確認したいと思います 「保存」して 「ブラウザでプレビュー」です シアンの塗りに ブルーの線が描かれました このレッスンでは 星形を描き 塗りの他にアウトラインを加えました 星を描くメソッドは drawPolyStar でした 中心の ( X , Y ) 座標 半径 の他に 頂点座標の数 どれくらい深く谷が落ち込むかという 谷の深さ 星形を描き始める角度 これを指定して星形が描かれます 線の指定は beginStroke で カラーを指定すれば良いということです

CreateJS実践講座

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

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

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

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

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