JAVASCRIPT PROGRAM

JavaScriptで三角関数を使って線分を表示しよう【初心者向け】

JavaScriptで三角関数を使ってみよう

今回は円を描き、その円の中心から円周に向かって線分を描いてみましょう。
線分の円周側の座標は、三角関数を使って求めます。
三角関数とは、高校で習うサイン(sine)、コサイン(cosine)、タンジェント(tangent)のことです。
三角関数を使うと角度と線の長さで、X座標とY座標を求めることができます。
具体的には、角度θと線の長さrが分かれば、X座標はコサイン、Y座標はサインを使えば求められます。
三角関数に関しては、こちらの記事も参照してください。

pystart27-1a

サイン(sin)、コサイン(cos)の使い方

JavaScriptでのサイン、コサインの求め方は、以下のようになります。
引数に角度を指定しますが、単位はラジアン(radian)を使います。

■サイン(sin)の求め方
Math.sin(ラジアン)

■コサイン(cos)の求め方
Math.cos(ラジアン)

メモ

ラジアンとは角度の単位で、日本語だと弧度法といいます。(学校で習う90度や180度というのは度数法といいます)
新明解では「円の半径と等しい長さの円弧に対応する中心角の大きさ」となっています。
上記の説明では分かりづらいので、ここでは180度はπラジアン、360度は2πラジアンと覚えておきましょう。
(π≒3.14とすると、1ラジアンは180÷3.14で約57.29度となります)

JavaScriptでのラジアンの求め方は、以下のようになります。

角度 × (Math.PI ÷ 180)

サイン(sin)、コサイン(cos)を使って座標を求める

角度が45度、線の長さが10の場合の座標の求め方は、以下のようになります。
X座標がコサイン(cos)、Y座標がサイン(sin)で求められます。

■ X座標
Math.cos(45 * (Math.PI / 180)) * 10

■ Y座標
Math.sin(45 * (Math.PI / 180)) * 10

計算結果は両方とも7.07...になります。

三角関数を使って線分を表示するプログラム

上記のことをふまえて、線分を表示するプログラムを書いてみましょう。
学校で習う数学では、座標の基準(0,0)は左下(下図の左側)ですが、JavaScriptのcanvasでは左上(下図の右側)が(0,0)となります。

pystart27-2a

以下のプログラムは、円を描いてその円の中心から角度を30度ずつずらして12本の線分を描画しています。
座標の位置はサイン、コサインで計算した値を円の中心(この場合、200,200)に置き換える必要があります。
注意点としては、Y座標はサインで得た値がプラスであれば座標は上に向かうので、線分の開始地点からマイナスする必要があります。

プログラムを実行すると、WEBブラウザ上に以下のような画像が表示されます。

figure5-1

canvasに図形を描く詳しいやり方は、以下の「MDN Web Docs」を参照してください。

-JAVASCRIPT, PROGRAM
-