給定一組點怎麼平滑地用曲線連線呢?
這兩天突然找到了一個解決方案，其實可以使用quadraticCurveTo。
二次貝塞爾曲線，就是通過一個控制點，在兩點之間連線一條曲線。
上圖中，紅色的點是控制點，給人感覺，連線兩綠色端點的曲線彷彿受到了紅色點的磁力吸引。
核心程式碼是：
context.moveTo(p1.x, p1.y)
context.quadraticCurveTo(control.x, control.y, p2.x, p2.y)
複製程式碼當然這個曲線是有公式描述的，不過，本文我們只用它的一個特點就夠了。
那就是控制點與端點連線是與曲線相切的。
巧妙的地方來了！因為是相切的，假如我在某條切線的延長線上隨便找一個點，再以此為控制點，連線第3個端點，會怎樣？
沒錯，將得到光滑曲線！
上圖中，兩個控制點關於公共端點是對稱的。當然隨便一點都是可以的。
兩個向量的中點公式是：
x = (x1 + x2) / 2
因此當給出端點和中點這三個點中的任意兩個時，很輕鬆求出另外一個。
現在，3個點連線解決了，那麼任意一組點都可以類似畫出一條平滑曲線了。
比如5個隨機位置的：
感謝你看到這裡，希望有所幫助。
本文完。
一組點怎麼平滑地用曲線連線呢? - 老姚的回答 - 知乎 www.zhihu.com/question/53…
下面的內容是關於本系列的介紹。
2019年末，本人立了個flag，2020年要研究透canvas動畫技術。
（圖中二維碼是我的唯一微訊號，如有掘友想加的，麻煩備註下【掘金】哈。）
在這個系列，我想寫一些常見動畫知識，本文是第1篇，篇幅可能會長短不一。更多的請檢視我的個人主頁，或者《系列目錄》。
因為篇幅問題，根據以往的經驗，贊數不會太多，畢竟大家都喜歡給那種短時間看不完的文章點贊。嗯，我好像也是這樣。^_^
其實寫文章，主要還是給自己看的，算是自我進步的一個見證吧。抱著這種心態也許能好些。
另外關於canvas技術，我目前完整看完了3本書。算是過了基礎一關。
本系列一些文章可能會參考裡面的知識體系，對於一些屬於領域共識知識，如有區域性雷同，只能說：“自己憑本事學來的，怎能算抄襲。。。”。
開玩笑了，想法來源能提一句還是要提一句的。特別喜歡《精英日課》文章裡的一段話：
至於文章內容，canvas的API，本系列可能不會準備逐條介紹了，還請初學的童鞋見諒哈。MDN都有的，挺詳細的。同時，文章中遇到的還是會簡單提下。主要核心是闡述一些技巧和原理層面的知識個人理解吧。另外也打算分析一些codepen上炫酷動畫的實現原理，如果有時間可能會分析幾個動畫引擎，當然都是2D的。
再次感謝你閱讀到這裡。下一篇文章見。