Canvasを使うためのJavaScript入門

星形を描く

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
直線でパスを描く応用例として、星形をつくりましょう。星形のパスは関数で定めて2Dコンテクストに描きます。
講師:
14:50

字幕

直線のパスを使って 図形を描く応用例として 星型を書いてみましょう 星型の頂点の数は自由に選べるように 関数として定めます また ここでは同じような処理を繰り返す script の構文についても学びます html ドキュメントの script 要素には ここまで書いてあります まず初期設定で2Dコンテクストの オブジェクトを取り出したら 関数 draw を呼び出して そのオブジェクトを渡します 関数 draw は受け取った 2Dコンテクストのオブジェクトを基にして パスの設定を行っています そして問題は星型のパスを描く drawStar という関数をどう定めるかです 今のところはただ側だけ作ってあります この関数には context2D に入っている オブジェクトをはじめ いくつかの数字を指定して 引数に渡そうと思います ですから この関数の定義の仕方について 一度考えておく必要があります 星型のパスを描く関数の仕様を決めます まず 関数名は drawStar です それから引数は少し多くて6つあります まずパスを描く為の「2D コンテクスト」 これはいいですね それから星型の中心の x 座標と y 座標です 星型の頂点の数も渡します 頂点というのは この出っ張りという風に決めておきます この星型は出っ張り頂点が5つあります そして星型というのは 出っ張った部分と つまり山の部分と谷の部分があります 中心から山の部分まで これを山の半径として数値を与えます 同じように中心からへこんだ所 谷までの半径も決めます このような関数を定めた暁には 星型を自由に決めることができます では実際にその処理を どのように計算すればいいのか もう少し考えましょう 星型のそれぞれの頂点の座標を求めるには まず山と谷の間の角度 これを中心角と呼ぶことにしますが 中心角を求める必要があります 最もこれは単純な割り算です 頂点の数 これは山の数でした 谷との間の角度ですから 頂点数を2倍にして 360度で割り算をすれば 中心角は求まります 中心角がわかったら 中心角を1倍 2倍 3倍にしつつ 山の半径と谷の半径を基にして それぞれの山と谷の座標を 求めていくことになります その為には半径つまり距離と角度で 座標を求めなければなりません つまり距離と角度から座標を求める 計算式をこれから覚えましょう 距離と角度から座標を求めるには 三角関数の sine と cosine を使います 三角関数というと 頭が痛くなる人もいるかもしれません ですが三角関数の定義というのは実は 半径1で角度 θ という風に 与えられた時に その座標 ここでは P と書いてありますが x 座標が cosine θ y 座標が sine θ と 決めてあるという事です 言い換えれば 距離が1で角度が θ の x 座標は x 座標が cosine θ y 座標が sine θ と 決めてあるという事です ということはもし距離が 1でなかったらどうなるでしょう 簡単ですね 距離を掛け算すればいいです つまり距離が r で角度が θ だったら x y 座標はそれぞれ x が r 掛ける cos θ y が r 掛ける sin θ ということです これでもう座標は求められます 星型のパスを描く 関数 drawStar の引数を決めたので それを入れていきましょう まずパスを描く2Dコンテクストの オブジェクトを渡します それから中心の x y 座標ですが とりあえず100ぐらいにしておきましょう 100, 100, です 頂点数 5が星型だとしたら 格好がいいと思います 山の半径長い方です 谷の半径短い方です 関数の draw 算の定義に それを受け取るように 引数の変数を定めます まず context2D を受け取り x座標と y座標 頂点数ですね Vertex は頂点のことです それから長い山の半径 半径は Radius です 短い方 shortRadius です これで関数の引数が定められました 次に星型は時計の針12時の方向の てっぺんから書き始めることにします 座標は簡単に求められます moveTo で書き始めの1部を指定します 2Dコンテクストが入った オブジェクトに対して moveTo で書き始めの位置を指定します まず x座標は中心と一緒ですから nX と y座標は中心よりも少し上で 少しというか長い方の longRadius 山の半径です これを足し込んであげれば 書き始めの位置になります シンタックスエラーの表示邪魔ですので Xマークで消しておきます この後 中心角を求めて 座標を計算していくわけですが 角度の単位について注意が必要です ラジアンという単位を使います JavaScript の三角関数では 角度の単位としてラジアンを使います ラジアンというのはどういう角度かというと 半径1の円で考えます これを単位円といいます 半径1の円で角度 例えばこのθの角度を 弧の長さで表します ということは1周360度の場合には 半径が1ですから 直径 x π つまり2πラジアンが 1周360度ということになります 例えば90度であれば その4分の1ですから2分のπです 一般に度数からラジアン に直すには この計算式を使えばいいでしょう 関数 drawStar で 星型のパスを書き始める前に 必要な値を変数に取っておきます まず中心角です nTheta としておきましょう 中心角は1周360度を 頂点数の2倍で割るんでした しかし三角関数で使いますから 360度ではなく 2π を使います π は Math.PI で JavaScript では指定します 割ることの頂点数 これは頂点数の2倍だったのではないか π の2倍を頂点数の2倍で割ります π を2倍していませんので 頂点数を2倍する必要がないのです 変数はもう1つ定めます 現在 書いている座標の角度です nRadians としておきましょう 書き始めは時計の12時の 1のてっぺんでした 度数でいうなら-90度です しかしここもやはりラジアンを使いますから -Math.PI / 2 ; ということです この後 角度を中心角分づつ増やしながら 座標を決めていきます これは座標は山 谷 山 谷と 同じパターンを繰り返します この様な繰り返し処理に使うような構文を これからご紹介します 同じパターンの処理を繰り返す 構文の説明をします for というキーワードを使うので for 文と呼ばれたりもします ( の中に3つの指定をします そして{ の間に処理を書くと この{ の間の処理が繰り返されます どれだけ繰り返されるかということは この3つの指定で定めます まず第1は初期化処理 これは初めに設定する値とか 変数といったものを定めます 2番目は継続条件です この条件が満たされている間 { の中の処理が繰り返されます 3番目は1回処理が終わる度に 行われる処理です 1回の処理を ループと言ったりもしますので ループごとに行われる 何らかの処理ということです もう少し具体的な例でご説明しましょう 例えば5回繰り返したい処理があるとします そうすると まずお決まりは 初期化処理には変数を設定します これをカウンター代わりに使うわけです 1からスタートして 5まで実行したい訳ですが 1つ飛ばして更新処理は i++ この i という変数の値を1加算します つまりカウントアップですね それから継続条件は <=不等号です 5ということですから 5は含まれて5以下の間 実行されます ということは1からスタートして 2 3 4と5までは繰り返されますが カウントアップして6になったら 処理は行わずに抜けるということになります 関数 drawStar に for 文を加えます キーワード for です 変数にはなぜか カウンターには i を使うことが多いです 1からスタートしましょう そして条件としては頂点数の分だけです numVertex が頂点数でした 山と谷があるわけですが この for 文の中では 山と谷ワンセットで行いますので 頂点数分だけ繰り返せば大丈夫です そしてカウントアップですね { を加えます for 文の中に山と谷への座標への lineTo メソッドを加えます まず現在の角度に対して角度を加算します 中心角を加算します 中心角は nTheta でした 天辺からスタートしていますので 次は谷です 谷はまず context2D に対して lineTo メソッドです x座標は cosain を使いました cosain を Math.cos です 角度はここに Radians がありますので それを入れます 半径を掛け算しなければなりません 谷ですから shortRadius ですね それを掛け算します 中心分だけ座標を ずらさなければいけないので x 座標を足します y 座標についても考え方は同様です ただ y座標のほう sine になります Radians を引数に渡して かける半径は短い方 谷の半径です 掛け算し y座標を足します 谷の次は山の座標に lineTo です 只ほぼ処理の内容は同じなので コピーしてしまいましょう 「コピー」して「ペースト」です やはり中心角を足し込みます 中心角を足し込みましたので 同じく sine と cosine には nRadians を渡せばいいですし 中心座標分をずらします 違ってくるのは山ですから 半径が longRadius になります そして「ペースト」します 忘れずにこちらも「ペースト」です 1か所間違っていましたので訂正します 書き初めの位置の y 座標です 中心に対して山の半径を足すと 下になってしまいます y 座標は下向きに+ですので 上の場合には-しなければいけません これで OK でしょう ブラウザで確かめてみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です 頂点5つの星型が描かれました cyan の塗りと青い線が設定されています 直線のパスで図形を描く応用として 星型を書いてみました ご紹介したのは 繰り返し処理をする構文の for 文と それから距離と角度から座標を求める 三角関数の使い方も是非覚えておいて下さい

Canvasを使うためのJavaScript入門

このコースでは幅広いJavaScriptの技術の中からCanvasを使うときに知っておかなければならない基本を手短に解説します。変数や関数といったプログラミングの基礎を学ぶところから、実際にCanvasへ簡単な描画を行うまでを説明します。

1時間25分 (12 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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