キャンバスに三角関数のグラフ（円と波）を表示する

1. 円を描く

角度0°から360°まで 1度づつ、半径Rと角度θから円周上の座標を求め、一点ごとにごく小さな円を描いていく。

HTML & JavaScript コードを開く

実装のポイント

キャンバス座標系は原点が左上隅ある。y軸の方向はデカルト座標とは逆に下向きになるので、三角関数により得られた y座標の符号は反転させる。

三角関数の公式

x = R * cosθ

y = R * sinθ

ラジアンを求め方

角度とは、半径と円弧の長さの比率のことである。ラジアンは、弧度法による角度の単位であり、円の半径を 1としたときの円弧の長さで表される。

円周の長さは半径 x 2 x 円周率（2rπ）である。よって、角度360°のラジアンは 2π、90°は 1/2π、180°は π となる。

度数法の角度からラジアンを求める式

ラジアン = 角度a・π / 180（= 角度a・1/360・2π）

HTML & JavaScript コードを開く

三角関数により正弦波/余弦波を求める方法

A：振幅 w：角周波数（周期） t：時間

y = A * sinθ(w * t)

y = R * cosθ(w * t)

HTML & JavaScript コードを開く

HTML & JavaScript コードを開く

実装のポイント

アニメーションは、windowオブジェクトの requestAnimationFrameメソッドで表示する。引数で指定した関数が、ディスプレイの表示速度（リフレッシュレート）に応じて実行される。リフレッシュレートは、PCのハードスペックに依存する。システムの環境設定で変更できる場合もある。

setTimeoutメソッドを使用してもアニメーションを表示することができる。引数で指定した時間（ミリ秒）が経過したあと指定した関数が実行される。