波形のアニメーション：三角関数の利用

前回は直線の動きをするアニメーションを作成しましたが今回は三角関数のメソッドを用いて波形のアニメーションを作りたいと思います。
今回用いるメソッドは正弦関数と余弦関数を用いるメソッドで以下のように用います。

正弦関数を用いるメソッド：Math.sin(角度)

余弦関数を用いるメソッド：Math.cos(角度)

これらのメソッドで用いる角度はラジアン表記を用います。
ラジアン表記とは大雑把にいえば180度の角度を円周率π（約3.14）として扱う表記です。
今回のアニメーションは横方向に1ピクセルにつき1度ずつ動かしてそれをxの値として、360ピクセルで360度の周期で繰り返すものです。しかしそのピクセルの値を三角関数のメソッドに直接用いると思うように動かなくなります。（わずかに6ピクセル動けばほぼ360度、つまり2π分動いた扱いになり結果としてすごい勢いで振動するアニメーションになります）
そこで次のようにx度をラジアンradに変換します。

rad = x * Math.PI / 180;

Math.PIは円周率πです。

今回のアニメーションではオレンジ色の四角形が正弦関数を用いた動きで紫色の四角形が余弦関数を用いた動きをします。
またcanvasでは下方向に正の値が向かいますのでそれには注意してください。