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

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

在坐標系中理解tan 和 atan

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

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

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

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

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

為何存在atan2 ?

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

那么atan2又是怎么回事呢？

要知道這個，需要知道arctan的不足之處：

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

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

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

它的計算過程是怎樣的呢？

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

atan2的應(yīng)用

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

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

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

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

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

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

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

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

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

何時需要使用atan2 ?

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

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

這個需求的難點就是要計算出箭頭的另外兩個點坐標。

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

這兩個需求的共同特點是：

1）兩個已知的點

2）根據(jù)這兩個點和其他的條件去計算一些必須的（畫line,arc等必須的）點坐標。

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

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

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

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

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

廣告

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