從小數學就不及格的我，竟然用極座標系表白了我的女神！（附程式碼）
歡迎大家前往 ofollow,noindex">騰訊雲+社群 ，獲取更多騰訊海量技術實踐乾貨哦~
在數學中，極座標系（英語：Polar coordinate system）是一個二維座標系統。該座標系統中任意位置可由一個夾角和一段相對原點—極點的距離來表示。在兩點間的關係用夾角和距離很容易表示時，極座標系便顯得尤為有用；而在平面直角座標系中，這樣的關係就只能使用三角函式來表示。對於很多型別的曲線，極座標方程是最簡單的表達形式，甚至對於某些曲線來說，只有極座標方程能夠表示。（來自維基百科）
通過轉換，極座標的(φ, r)可以變換為直角座標系中的(x,y)座標，轉化公式如下
img
img
這樣，許多用極座標函式表示的曲線，都可以在js裡面轉成直角座標系並畫出來了。下面介紹一下以下幾種曲線並用canvas繪製了曲線動畫：
1. 心形線
函式：
Line"/>
img
引數意義：a表示從x軸上從原點到最遠點的一半。
img
js動畫：在js中實現時，只需將極座標角度從0到360代入方程，求出(x,y)座標
img
2. 伯努利雙紐線
函式：
img
引數意義：a表示從中心點到兩端最遠處的距離。
img
js動畫：繪製時，代入角度的區間是[-45，45]，需要繪製(-x,-y)和(x,y)兩部分的座標。
img
3. 星形線
函式：
img
引數意義：a表示從中心點到最遠處的距離。
img
js動畫：在js中實現時，只需將角度從0到360代入方程，求解過程中不需要轉換極座標，直接代入x,y，求出(x,y)座標
img
4. 玫瑰線
函式：
img
引數意義：k代表有“幾朵花瓣”，如果k是奇數，則得到的花瓣數就是k，如果k為偶數，則得到的花瓣數為2k。a同上表示從中心點到最遠處的距離。
js動畫：當k為奇數時，角度區間在[0,180]即可閉合；當k為偶數時，區間在[0,360].
img
5. 阿基米德螺線
函式：
img
引數意義：相鄰“臂”之間的距離為2 180 a
js動畫：角度一般要設定大於360，才有螺線效果，例子中角度為弧度，所以相鄰“臂”之間的距離為2 PI a。
img
除此之外，還有這樣以幾何級數增大的螺線和從外往內描繪的螺線：
6. 對數螺線
函式：
img
js動畫：
img
7. 雙曲螺線
函式：
img
js動畫：
img
以上七種曲線的demo： 展示地址
總結
在簡單的圖形和動畫軌跡上，我們可以換一種實現思維，例如通過函式來實現。最後，使用k=6的玫瑰線定義了(x,y)座標，並設定z座標為 (x,y)到z軸距離的3次方根，通過threejs，設定圖片的頂點數，用曲線連線畫了一個小demo。
img
此文已由作者授權騰訊雲+社群釋出，更多原文請 點選
搜尋關注公眾號「雲加社群」，第一時間獲取技術乾貨，關注後回覆1024 送你一份技術課程大禮包！
海量技術實踐經驗，盡在 雲加社群 ！