摘要：常用三角函數(shù)前面我們簡單的介紹了三角函數(shù)的表示方法以及的坐標(biāo)系統(tǒng)。總結(jié)這節(jié)你應(yīng)該學(xué)會了如何運(yùn)用三角函數(shù)，控制物體的旋轉(zhuǎn)。

本節(jié)主要內(nèi)容有：

三角函數(shù)介紹

常用三角函數(shù)解析

鼠標(biāo)跟隨角度旋轉(zhuǎn)

看到三角函數(shù)，勾股定理這樣的數(shù)學(xué)名詞是不是有種雙腿打顫的感覺啊！好吧，就算你已經(jīng)嚇尿了，也不能否認(rèn)我們中學(xué)學(xué)習(xí)的知識終于有了用武之地，挽起袖子，開整！！！

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

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

如圖所示，與普通坐標(biāo)不同，canvas坐標(biāo)以整個畫布的左上角作為坐標(biāo)原點(diǎn)，y軸朝下為正，x軸水平向右。坐標(biāo)不同，對應(yīng)的角度表示就有所差異，這個差異主要體現(xiàn)在角度的正負(fù)上。

上圖中canvas的坐標(biāo)與普通坐標(biāo)感覺一樣，但我想表達(dá)的是在canvas中順時針方向為正，逆時針為負(fù)。

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

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

對應(yīng)到j(luò)avascript中,相應(yīng)表示方法如下。

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)

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

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

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

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

arrow.js文件

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

    }
    //在原型上定義draw方法
    Arrow.prototype.draw = function(context){
        context.save();
        context.translate(this.x , this.y); //將坐標(biāo)移到this.x 和 this.y
        context.rotate(this.rotation); //設(shè)置旋轉(zhuǎn)角度
        context.lineWidth = 5;  //設(shè)置線寬
        context.fillStyle = this.color; //設(shè)置填充色
        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();
    }

現(xiàn)在我們在rotate-to-mouse.html文件中引入它，來創(chuàng)建一個箭頭

rotate-to-mouse.html 文件

  
      you browser not support canvas
  

   //引入我們的工具函數(shù)文件
   //引入我們的箭頭函數(shù)文件
  

我們最終得到的結(jié)果就是一個，可以跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭。

這節(jié)你應(yīng)該學(xué)會了如何運(yùn)用三角函數(shù)，控制物體的旋轉(zhuǎn)。重點(diǎn)公式：

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