HTML5手習い

三角関数

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グラフィックスプログラミングのさまざまな場面で使用する三角関数の基本について学び、それを利用してオブジェクトを円形に配置します。
講師:
05:53

字幕

このレッスンでは 三角関数とは 何かについて学びます 三角関数とは 三角形の辺の 長さの間の比を表すものです 三角関数にはいくつもの種類がありますが その中でも代表的なのが コサイン関数とサイン関数です この図のような半径が 1 で 円の中心が 原点に来るようなもののことを 単位円と呼びますが x がコサイン t y が サイン t にくるような点は t を動かしていくことによって 単位円上を移動していきます それでは JavaScript で 三角関数について学びましょう アセットの sleepingcat.html それから sleep.jpg を 用意しておいてください テキストエディタと Chrome で sleepingcat.html を開きます HTML を開くとこのような画面になります それでは こちらの canvas の中心に 円を描いてみましょう まずは 円の塗りつぶし色を指定します context.fillStyle=rgba(0,150,0,1) で 指定しましょう 緑色です そして パスを開始するために context.object の begin パスメソッドを呼び出します それから context.arc メソッドで パスに円を追加します 円の原点 中心は canvas.width/2 それから高さは canvas.height/2 これで円の中心が canvas の 真ん中に配置されます それから 円の半径は 30 pixel 円の開始角度・終了角度は 0 ラジアンから 2 π (パイ)ラジアンまで そして最後に context.fill メソッドで 円の描画を完了します ブラウザをリロードしてみましょう このように真ん中に 緑色の円が配置されました それでは 三角関数を使って この円を canvas の中心を原点と 見立てた円の上に配置してみましょう まず円の原点をずらします 円の原点はまず cos(コサイン) 何らかのもの 角度 そして― y は sin (サイン)の何らかの角度 という形になるはずです そして コサイン・サインは 必ず -1 から 1 の範囲に収まるか 値を返します コサイン t サイン t が単位円上を 移動するということを思い出してください ですので 長さをかけてやる必要があります これらを入れるための変数を用意しましょう そして a は最初は 0 でいいです 半径は canvas の幅の 40% 程度にしましょう 円の中心点をこのように コサイン・サインを使うことによって xy 座標を指定することができます これで描画してみると このように 0 度の位置に 円が描画されました では これを 角度を 例えば π/2 ( 2 分のパイ)にしてみます π/2 (パイ割る 2 ) すると 90 度ずれるはずです このように 90 度下に 円の位置がずれました 通常の数学の図形で見られるように 円が上にずれずに下にずれました これは canvas では原点が左上が 0 そしてそこから下に向かって 正に大きくなっていくという 座標系になっている為です これは通常の数学の座標系とは 上下が逆になっています そのため このように描画される円の位置も 上下が逆になったのです 他の角度も試してみましょう 例えば π/4 ( 4 分のパイ)にすれば これは45 度ですので このように 45 度程度 原点からずれた角度になりました そして例えば 対の角度であれば 対は 180 度を意味するので 先程の 0 の位置とは正反対の位置に 円が描画されました では この三角関数を利用して 円周上に 12 個の円を配置してみましょう 時計のようなイメージです まず for ループで回します I = 0 I が 12 より小さい時 I++ これで 12 回 回すループになりますね そしてループの中にこれらの描画の 命令を入れてやって そして角度の計算をループ前に ずらしてやります 角度は― 2xπ/12( 2 掛けるパイ割る 12 ) これで 12 等分された角度の刻みになります これ x I (掛ける I )ですね このようにしてリロードすることで このように時計のような 円周上の円の配置ができました このレッスンでは 三角関数とは 何かについて学びました

HTML5手習い

このコースではHTML5 APIを中心に、HTML5でのプログラミングについて学びます。HTTPや文字コード、バイナリデータやアニメーションの原理など実際のアプリケーション開発で必要となる基本的な知識を学びます。HTML5 Canvasを中心として、Web APIとの通信やWebフォントなどWebプログラミングで必要な技術を習得します。

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

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

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

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