摘要：常用三角函數前面我們簡單的介紹了三角函數的表示方法以及的坐標系統。總結這節你應該學會了如何運用三角函數，控制物體的旋轉。

本節主要內容有：

三角函數介紹

常用三角函數解析

鼠標跟隨角度旋轉

看到三角函數，勾股定理這樣的數學名詞是不是有種雙腿打顫的感覺??！好吧，就算你已經嚇尿了，也不能否認我們中學學習的知識終于有了用武之地，挽起袖子，開整！??！

什么是三角函數呢？簡單的定義：所謂三角函數，在幾何上來說就是夾角與邊的關系！為了更直觀的表示，也為了讓忘記的同學回憶起來，這里我給個示意圖。

在上圖中例出了幾個常用的三角函數，角度與邊（x, y和R）之間的關系如公式所示！那么在canvas中角度與邊之間的關系是怎樣的呢？首先，我們需要知道的是canvas中坐標是如何定義的。

如圖所示，與普通坐標不同，canvas坐標以整個畫布的左上角作為坐標原點，y軸朝下為正，x軸水平向右。坐標不同，對應的角度表示就有所差異，這個差異主要體現在角度的正負上。

上圖中canvas的坐標與普通坐標感覺一樣，但我想表達的是在canvas中順時針方向為正，逆時針為負。

前面我們簡單的介紹了三角函數的表示方法以及canvas的坐標系統。但是，在實際開發中我們不僅想要通過角度來推出兩邊的距離長度比值。而更關心的是如何通過已知的距離(因為坐標的位置很好確定)來推出角度。這里我們要用到反三角函數

sin(θ)=x/R   --->  θ = arcsin(x/R)
cos(θ)=y/R   --->  θ = arccos(y/R)
tan(θ)=x/y   --->  θ = arctan(x/y)

對應到javascript中,相應表示方法如下。

sin(θ)  --->  Math.sin( θ * Math.PI/180 )
cos(θ)  --->  Math.cos( θ * Math.PI/180 )
tan(θ)  --->  Math.tan( θ * Math.PI/180 )

θ = arcsin(x/R) ---> Math.asin(x/R)*(180/Math.PI)
θ = arccos(y/R) ---> Math.acos(y/R)*(180/Math.PI)
θ = arctan(x/y) ---> Math.atan(x/y)*(180/Math.PI)

好吧！看到這里也許你已經惡心得想吐了。但是，沒辦法這就是數學的魅力！這里需要強調的是：canvas中角度的表示采用的是弧度制。這樣你就可以理解 θ * Math.PI/180是將角度轉成弧度，比如：30° = 30 * π /180 = π / 6。 而將弧度轉成角度自然就要用弧度值`Math.asin(x/R) 乘上180/Math.PI`。這之間的轉換關系，慢慢想想就明白了！

相比于Math.asin()和Math.cos()這兩個函數，Math.atan()在開發中用到的更多。它可以直接通過兩個直角邊得到對應的角度值。相比于其他兩個需要通過計算長邊來得到角度值來說，計算過程更加簡單！但是，該函數在角度的判定上回出現一個問題——存在兩個相同的角度值而無法判定物體具體的旋轉角度。詳細說明如下圖所示。

因為，tan函數的周期是（-π/2, π/2）,由于這一特性導致電腦是無法判斷旋轉的到底是哪個角度！??！這時，另一個函數就橫空出世了，當當當當，他就是Math.atan2(dy, dx)!他不僅解決了上面我們說的問題，而且只需要傳入橫縱坐標距離就可以計算出對應的角度值！是不是很酷。

本章的理論知識已經介紹完成?，F在，開始我們的第一個demo——rotate-to-mouse.html顧名思義就是跟隨鼠標旋轉。首先創建一個文件arrow.js，這個文件是使用canvas畫一個箭頭，并且為了今后方便使用，將它寫成一個類文件！代碼如下：

arrow.js文件

    function Arrow() {
        this.x = 0;  //初始位置
        this.y = 0;
        this.rotation = 0;  //初始旋轉角度
        this.color = "#ffff00";

    }
    //在原型上定義draw方法
    Arrow.prototype.draw = function(context){
        context.save();
        context.translate(this.x , this.y); //將坐標移到this.x 和 this.y
        context.rotate(this.rotation); //設置旋轉角度
        context.lineWidth = 5;  //設置線寬
        context.fillStyle = this.color; //設置填充色
        context.beginPath();  //路徑開始
        context.moveTo(-50,-25);
        context.lineTo(0,-25);
        context.lineTo(0,-50);
        context.lineTo(50,0);
        context.lineTo(0,50);
        context.lineTo(0,25);
        context.lineTo(-50,25);
        context.closePath(); //路徑閉合
        context.stroke(); //描邊
        context.fill(); //填充
        context.restore();
    }

現在我們在rotate-to-mouse.html文件中引入它，來創建一個箭頭

rotate-to-mouse.html 文件

  
      you browser not support canvas
  

   //引入我們的工具函數文件
   //引入我們的箭頭函數文件
  

我們最終得到的結果就是一個，可以跟隨鼠標旋轉的箭頭。

這節你應該學會了如何運用三角函數，控制物體的旋轉。重點公式：

dx = mouse.x - object.x;
dy = mouse.y - object.y;
object.rotation = Math.atan2(dy,dx);