歡迎大家前往 "騰訊雲+社區" ，獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "郭詩雅" 發表於 "雲+社區專欄" 在數學中，極坐標系（英語：Polar coordinate system）是一個二維坐標系統。該坐標系統中任意位置可由一個夾角和一段相對原點—極點的距離來表示。在兩點間的關係用夾角和距離 ...
歡迎大家前往騰訊雲+社區，獲取更多騰訊海量技術實踐乾貨哦~
在數學中，極坐標系（英語：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。
問答
游戲體繫結構
相關閱讀
玩轉flex佈局
動感光波發射！Unity AR開發之 3d 物體識別小記
Three.js 粒子系統學習小記：禮花效果實現
【每日課程推薦】機器學習實戰！快速入門線上廣告業務及CTR相應知識
此文已由作者授權騰訊雲+社區發佈，更多原文請點擊
搜索關註公眾號「雲加社區」，第一時間獲取技術乾貨，關註後回覆1024 送你一份技術課程大禮包！
海量技術實踐經驗，盡在雲加社區！
