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

為樂(lè)平等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及樂(lè)平網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、網(wǎng)站制作、樂(lè)平網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

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

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

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

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

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

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

為何存在atan2 ?

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

那么atan2又是怎么回事呢？

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

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

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

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

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

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

atan2的應(yīng)用

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

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

從x軸正向沿逆時(shí)針?lè)较颍?jīng)過(guò)的角度分別是0，-π/2, -π，-3π/2，-2π。

atan2的結(jié)果在(-π，π]之間，恰好一周，四個(gè)象限全覆蓋。從坐標(biāo)系來(lái)看，順時(shí)針?lè)较虻闹凳钦担鏁r(shí)針?lè)较虻闹凳秦?fù)的。

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

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

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

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

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

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

目前我遇到了兩種情況，是通過(guò)atan2來(lái)解決的：

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

這個(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ù)曲率來(lái)計(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)。

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

以上這篇JavaScript使用atan2來(lái)繪制箭頭和曲線的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

網(wǎng)頁(yè)題目：JavaScript使用atan2來(lái)繪制箭頭和曲線的實(shí)例-創(chuàng)新互聯(lián)
文章起源：http://aaarwkj.com/article14/pghde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、企業(yè)網(wǎng)站制作、網(wǎng)站改版、網(wǎng)站營(yíng)銷、ChatGPT、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)