三角學在動畫技術中被廣泛使用，不管是2D動畫亦或是3D動畫，都離不開三角學。
說到三角學，相信不少人會下意識地迴避數學與三角學，畢竟說起數學的種種邏輯與公式，腦袋就大了。事實上，我們不必過於擔心自己的數學不夠好而影響到動畫編程，大多數情況下，你可能只需處理好與位置、距離以及角相關的變量就行。
其實學習三角學最主要的是掌握各種邊與角的關係 ，而且實現基本動畫的90%的三角學知識都可歸結於兩個常用的三角函數：Math.sin 與 Math.cos。
1、角度與弧度
角的度量單位分別有角度和弧度兩大系統，對於角度系統，相信我們都不陌生。不過在衡量角的大小的時候，計算機卻更傾向於使用弧度的概念。所以無論喜歡與否，你都需要了解弧度。
2、canvas坐標系
常見的二維坐標系，其坐標原點（0,0）通常位於空間的正中心，x軸的坐標值向右以正數的形式不斷增大，向左以負數的形式 不斷減小，而y軸的坐標值向上以正數的形式不斷增大，向下以負數的形式不斷減小。
而canvas元素是基於視頻畫面的坐標系，其坐標原點（0,0）處在canvas畫布的左上角，x軸的坐標值從左往右不斷增大，y軸的坐標值是從上往下不斷增大。
除了坐標系之外，在大多數系統中，角度的測量是以逆時針方向為正值的，0°表示一條線沿x軸正方向延伸。但在canvas元素中，順時針的角度才是正值，逆時針的角度反而成了負值。
3、三角函數
三角函數是基本初等函數之一，是以角度為自變量，角度對應任意角終邊與單位圓交點坐標或其比值為因變量的函數。
常見的三角函數包括正弦函數、餘弦函數和正切函數。一般用於計算三角形中未知長度的邊和未知的角度。
（1）正弦
一個角的正弦表示與該角相對的直角邊與斜邊的比例。
在JavaScript中，使用Math.sin(angle) 函數計算正弦值。
如上圖顯示的是一個30°角的三角形，該30°角的對邊長度為1，斜邊長度為2，它們的比率是1 : 2，即1/2 或 0.5。因此，我們可以認為30°角的正弦值為0.5。
用 JavaScript 函數計算30°角正弦值如下：
注意：在開始計算正弦值之前，第一步我們需要將角度值轉換為弧度值，然後再進行計算。
執行結果如下：
執行代碼後我們發現得到的是一串很長的浮點數，這是因為二進位電腦在表示浮點數時經常會出現的結果。我們可以四捨五入處理把它當作0.5即可。
但是在canvas坐標系中，垂直向上以及逆時針的角度均是負值，所以在上圖三角形中，角的對邊和角自身都是負值。
如此一來，對邊和斜邊的比例就變成了-1/2，即-0.5：
（2）餘弦
一個角的正弦表示與該角相對的鄰邊與斜邊的比例。
在JavaScript中，使用Math.cos(angle) 函數計算餘弦值。
如上圖顯示的是一個30°角的三角形，該30°角的鄰邊相對於 角向右方向延伸，所以在x軸上長度是正值，長度為1.73，斜邊長度為2，它們的比率是1.73 : 2，即0.866。因此，我們可以認為-30°角的餘弦值為0.866。
用 JavaScript 函數計算該30°角餘弦值如下：
執行結果如下：
（3）正切
正切是另一個重要的三角函數，在 JavaScript 中通過函數Math.tan(angle) 表示，它表現的是對邊與鄰邊的關係。
用 JavaScript 函數計算該30°角正切值如下：
執行結果如下：
實際上，在日常的動畫代碼中很少用到正切，用得比較頻繁的主要是正弦和餘弦。
（4）反正切
為什麼不說反正弦和反餘弦呢？其實反正弦和反餘弦同正切一樣，在一般的動畫場景中不太用到，而在動畫開發中，反正切起的作用反而更大些。
反正切是正切的逆運算，輸入角的對邊和鄰邊的比率，通過計算反正切就可得到角的弧度。在 JavaScript 中通過函數Math.atan(ratio) 表示。
由上第3點正切可以看出，30°角的正切值是0.577（四捨五入），由此可根據正切值計算出對應角度如下：
注意：計算得到的是弧度值，需要把弧度轉換為角度。
執行結果如下：
一個接近30的值，即表示角度為30°
我們細心觀察就會發現這裡存在這樣一個問題：
如圖所示的4個三角形A、B、C、D，分別用正切函數
Math.atan(ratio)計算它們的正切值如下：
A：-1 / 2，即 -0.5，Math.atan(-0.5) = -26.57°B：1 / 2， 即 0.5，Math.atan(0.5) = 26.57°C：1 /(-2)，即 -0.5，Math.atan(-0.5) = -26.57°D：(-1)/(-2)，即 0.5，Math.atan(0.5) = 26.57°
（以上計算省略了弧度轉角度，默認計算出了角度）
我們可以看到，僅憑 Math.atan(-0.5) = -26.57°，是無法分辨這個三角形是A還是C，同理，B與D亦是無法分辨。
那麼是否就無法解決這個問題？非也！
在 JavaScript 中，還有另一個反正切函數：
Math.atan2(y, x)
該函數接受兩個參數：對邊與鄰邊的長度，從而計算出弧度的值，它的不同之處在於，得出的角度值是從x軸正軸開始以逆時針方向計算的。
這時我們用 Math.atan2(y, x) 計算A、B、C、D 這4個三角形的角度：
A：Math.atan2(-1, 2) = -26.57°B：Math.atan2(1, 2) = 26.57°C：Math.atan2(1, -2) = 153.43°D：Math.atan2(-1, -2) = -153.43°
由此我們可知，在canvas坐標系統中，我們所關注的三角形D的角度為 -153.43° 而不是 26.57°，由此我們就可以很方便的分辨出三角形A和C，B和D具體是哪一個了！