JavaScriptで三角関数を使ってみよう
今回は円を描き、その円の中心から円周に向かって線分を描いてみましょう。
線分の円周側の座標は、三角関数を使って求めます。
三角関数とは、高校で習うサイン(sine)、コサイン(cosine)、タンジェント(tangent)のことです。
三角関数を使うと角度と線の長さで、X座標とY座標を求めることができます。
具体的には、角度θと線の長さrが分かれば、X座標はコサイン、Y座標はサインを使えば求められます。
三角関数に関しては、こちらの記事も参照してください。
サイン(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)となります。
以下のプログラムは、円を描いてその円の中心から角度を30度ずつずらして12本の線分を描画しています。
座標の位置はサイン、コサインで計算した値を円の中心(この場合、200,200)に置き換える必要があります。
注意点としては、Y座標はサインで得た値がプラスであれば座標は上に向かうので、線分の開始地点からマイナスする必要があります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Clock</title> </head> <body onload="strDraw();"> <canvas id="pos" width="400" height="400"></canvas> <script type="text/javascript"> // 直線表示関数 function line(fig,x1,y1,x2,y2,thick,color) { fig.beginPath(); // 新しいパスを作成 fig.lineWidth = thick; // 線の太さ fig.strokeStyle = color; // 線の色 fig.moveTo(x1,y1); // 線の開始座標 fig.lineTo(x2,y2); // 線の終了座標 fig.stroke(); // 輪郭を描画 } // 円表示関数 function circle(fig,x,y,r,start,end,mode,color,thick) { fig.beginPath(); // 新しいパスを作成 fig.arc(x,y,r,start,end); // 円を描画 fig.closePath(); // パスの終了 // 塗りつぶし if (mode == "fill") { fig.fillStyle = color; // 塗りつぶす色 fig.fill(); // 輪郭描画 } else if (mode == "stroke") { fig.strokeStyle = color; // 線の色 fig.lineWidth = thick; // 線の太さ fig.stroke(); } } // 開始関数 function strDraw() { // ドキュメントオブジェクト作成 var id1 = document.getElementById('pos'); // 2Dオブジェクト作成 var fig = id1.getContext('2d'); // 円の輪郭描画 circle(fig,200,200,180,0,Math.PI*2,"stroke","red",10); // 円の塗りつぶし circle(fig,200,200,180,0,Math.PI*2,"fill", "pink"); // 指定した角度毎に直線を描画 for (var deg of [60,30,0,330,300,270,240,210,180,150,120,90]) { // 円周側の座標計算 x = Math.cos(deg*(Math.PI/180))*180; y = Math.sin(deg*(Math.PI/180))*180; // 直線を描画 line(fig,200,200,200+x,200-y,5,"blue"); } } </script> </body> </html> |
プログラムを実行すると、WEBブラウザ上に以下のような画像が表示されます。
canvasに図形を描く詳しいやり方は、以下の「MDN Web Docs」を参照してください。