歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~

本文由郭詩雅發表於雲+社群專欄

在數學中，極座標系（英語：Polar coordinate system）是一個二維座標系統。該座標系統中任意位置可由一個夾角和一段相對原點—極點的距離來表示。在兩點間的關係用夾角和距離很容易表示時，極座標系便顯得尤為有用；而在平面直角座標系中，這樣的關係就只能使用三角函式來表示。對於很多型別的曲線，極座標方程是最簡單的表達形式，甚至對於某些曲線來說，只有極座標方程能夠表示。（來自維基百科）

​ 通過轉換，極座標的(φ, r)可以變換為直角座標系中的(x,y)座標，轉化公式如下

這樣，許多用極座標函式表示的曲線，都可以在js裡面轉成直角座標系並畫出來了。下面介紹一下以下幾種曲線並用canvas繪製了曲線動畫：

1. 心形線

函式：

引數意義：a表示從x軸上從原點到最遠點的一半。

js動畫：在js中實現時，只需將極座標角度從0到360代入方程，求出(x,y)座標

2. 伯努利雙紐線

函式：

引數意義：a表示從中心點到兩端最遠處的距離。

js動畫：繪製時，代入角度的區間是[-45，45]，需要繪製(-x,-y)和(x,y)兩部分的座標。

3. 星形線

函式：

引數意義：a表示從中心點到最遠處的距離。

js動畫：在js中實現時，只需將角度從0到360代入方程，求解過程中不需要轉換極座標，直接代入x,y，求出(x,y)座標

4. 玫瑰線

函式：

引數意義：k代表有“幾朵花瓣”，如果k是奇數，則得到的花瓣數就是k，如果k為偶數，則得到的花瓣數為2k。a同上表示從中心點到最遠處的距離。

js動畫：當k為奇數時，角度區間在[0,180]即可閉合；當k為偶數時，區間在[0,360].

5. 阿基米德螺線

函式：

引數意義：相鄰“臂”之間的距離為2180a

js動畫：角度一般要設定大於360，才有螺線效果，例子中角度為弧度，所以相鄰“臂”之間的距離為2PIa。

除此之外，還有這樣以幾何級數增大的螺線和從外往內描繪的螺線：

6. 對數螺線

函式：

js動畫：

7. 雙曲螺線

函式：

js動畫：

以上七種曲線的demo：展示地址

總結

​ 在簡單的圖形和動畫軌跡上，我們可以換一種實現思維，例如通過函式來實現。最後，使用k=6的玫瑰線定義了(x,y)座標，並設定z座標為 (x,y)到z軸距離的3次方根，通過threejs，設定圖片的頂點數，用曲線連線畫了一個小demo。

demo地址：程式碼地址展示地址

此文已由作者授權騰訊雲+社群釋出，更多原文請點選

搜尋關注公眾號「雲加社群」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！

海量技術實踐經驗，盡在雲加社群！