最近搞Canvas繪圖，知道了JavaScript中提供了atan2(y,x)這樣一個(gè)三角函數(shù)。乍眼一看，不認(rèn)識，畢竟在高中時(shí)，學(xué)過的三角函數(shù)有：sin,cos,arcsin,arccos,tan,arctan等，并沒有這個(gè)。而工作中又需要用到它，所以這里就做了個(gè)簡單的了解。

在坐標(biāo)系中理解tan 和 atan

回顧一下三角函數(shù)tan：

tanθ，用三角函數(shù)來表示時(shí)，它的值等于sinθ/cosθ，如果將其放到坐標(biāo)系中，它的的值等價(jià)于：dy/dx。在坐標(biāo)系中，任意兩個(gè)點(diǎn)所組成的直線，相對于x軸的斜率就是tanθ = dy /dx，相對于y軸的斜率就是dx/dy ，此時(shí)我們用cot來表示；其中，dy 是兩個(gè)點(diǎn)的y坐標(biāo)的差值，dx是兩個(gè)點(diǎn)的x坐標(biāo)的差值。

那么坐標(biāo)系內(nèi)除了y軸，任何一個(gè)點(diǎn)(x,y)，相對于x軸的斜率就是y-0/x-0，也即是y/x。

我們將tanθ稱為一條直線相對于x軸的斜率，那么θ就是相對于x軸的夾角（旋轉(zhuǎn)角度）了。

tan，是根據(jù)角度計(jì)算斜率的。那么反過來 arctan（反正切）自然就認(rèn)為是根據(jù)斜率來計(jì)算角度的。

為何存在atan2 ?

在JavaScript中，提供了兩個(gè)arctan函數(shù)，一個(gè)是atan, 一個(gè)是atan2。 atan就是我們所熟知arctan。其實(shí)在很多編程語言中都提供了atan2。

那么atan2又是怎么回事呢？

要知道這個(gè)，需要知道arctan的不足之處：

arctan的返回值范圍是(-π/2, π/2) 不包括， ±π/2，也就是(兩個(gè)點(diǎn)組成的直線與x軸夾角是90°)90°是計(jì)算不出來的。為啥呢?在計(jì)算arctan ( dy/dx)時(shí)，如果兩個(gè)點(diǎn)(x1,y1),(x2,y2)組成的直線與x軸的夾角呈90°時(shí)，dx= x2-x1 = 0 ，0 是不能作為除數(shù)的，所以就無法計(jì)算這種情形。

值的范圍也就是計(jì)算的角度的范圍在（-π/2, π/2），從坐標(biāo)系來看，這個(gè)角度的范圍只能是在第1、4象限，并不能表示出第2、3象限的角。

為了彌補(bǔ)atan的不足，在計(jì)算機(jī)編程領(lǐng)域，引入了atan2函數(shù)，它的計(jì)算結(jié)果是在(-π,π]。它正好可以覆蓋整個(gè)坐標(biāo)系，包括90°的情形。

它的計(jì)算過程是怎樣的呢？

關(guān)于這個(gè)，我從wikipedia上摘取了它的計(jì)算過程：

atan2的應(yīng)用

在第一小節(jié)中的那張圖中的坐標(biāo)系，是我們熟知的。在HTML、Canvas中，坐標(biāo)系并不像我們熟知的坐標(biāo)系那樣。它是這樣的：

從x軸正向沿順時(shí)針方向，所經(jīng)過的角度分別是0，π/2, π，3π/2，2π。

從x軸正向沿逆時(shí)針方向，所經(jīng)過的角度分別是0，-π/2, -π，-3π/2，-2π。

atan2的結(jié)果在(-π，π]之間，恰好一周，四個(gè)象限全覆蓋。從坐標(biāo)系來看，順時(shí)針方向的值是正值，逆時(shí)針方向的值是負(fù)的。

從坐標(biāo)系上來看，atan2結(jié)果是（0,-π）時(shí)就表示，從x軸正向逆時(shí)針方向轉(zhuǎn)最大 π弧度（180角度）。同理，(0,π)表示從x軸正向順時(shí)針轉(zhuǎn)最大π弧度（180角度）。

在第1）小節(jié)中說了atan可以用來計(jì)算平面坐標(biāo)系內(nèi)任意兩點(diǎn)的連線與x軸正向之間的夾角。而atan2是atan的補(bǔ)充，那么使用atan2自然就可以來計(jì)算平面坐標(biāo)系內(nèi)任意兩點(diǎn)的連線與x軸正向之間的夾角了。

如果兩個(gè)點(diǎn)在第一象限內(nèi)：

如果兩個(gè)點(diǎn)在第四象限內(nèi)：

如果兩個(gè)點(diǎn)在不同的象限內(nèi)，我們也可以平移來看。

何時(shí)需要使用atan2 ?

目前我遇到了兩種情況，是通過atan2來解決的：

1） 在平面坐標(biāo)系內(nèi)任意兩個(gè)點(diǎn)間畫一條帶有箭頭的直線（可以是單向箭頭，可以是雙向箭頭）。在這個(gè)需求中，另外也知道了箭頭的一條邊與直線的夾角和箭頭的長度。

這個(gè)需求的難點(diǎn)就是要計(jì)算出箭頭的另外兩個(gè)點(diǎn)坐標(biāo)。

2） 在平面坐標(biāo)系內(nèi)任意兩個(gè)點(diǎn)之間畫一條指定曲率的曲線（arc）。在這個(gè)需求中，要計(jì)算arc，自然要知道radius, startAngle, endAngle，圓心坐標(biāo)。可以根據(jù)曲率來計(jì)算出半徑等，但是難點(diǎn)在計(jì)算圓心坐標(biāo)。

這兩個(gè)需求的共同特點(diǎn)是：

1）兩個(gè)已知的點(diǎn)

2）根據(jù)這兩個(gè)點(diǎn)和其他的條件去計(jì)算一些必須的（畫line,arc等必須的）點(diǎn)坐標(biāo)。

目前我遇到了這兩種需求，都通過atan2來解決的。其他的情況，目前尚且未知，待后續(xù)發(fā)現(xiàn)時(shí)，補(bǔ)充上。

以上這篇JavaScript使用atan2來繪制箭頭和曲線的實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評論