【canvas】一組點怎麼平滑地用曲線鏈接呢?

給定一組點怎麼平滑地用曲線鏈接呢?

這兩天忽然找到了一個解決方案，其實可使用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…

---

下面的內容是關於本系列的介紹。

今年年底，本人立了個flag，2020年要研究透canvas動畫技術。

（圖中二維碼是個人惟一微信號，若有掘友想加的，麻煩備註下【掘金】哈。）

在這個系列，我想寫一些常見動畫知識，本文是第一篇，篇幅可能會長短不一。更多的請查看個人我的主頁。

由於篇幅問題，根據以往的經驗，贊數不會太多，畢竟你們都喜歡給那種短期看不完的文章點贊。嗯，我好像也是這樣。^_^

其實寫文章，主要仍是給本身看的，算是自我進步的一個見證吧。抱着這種心態也許能好些。

另外關於canvas技術，我目前完整看完了3本書。算是過了基礎一關。

1.《HTML5 Canvas核心技術》

2.《HTML5+JavaScript動畫基礎》

3.《WebGL編程指南》

本系列一些文章可能會參考裏面的知識體系，對於一些屬於領域共識知識，若有局部雷同，只能說：「本身憑本事學來的，怎能算抄襲。。。」。

開玩笑了，想法來源能提一句仍是要提一句的。特別喜歡《精英日課》文章裏的一段話：

至於文章內容，canvas的API，本系列可能不會準備逐條介紹了，還請初學的童鞋見諒哈。MDN都有的，挺詳細的。同時，文章中遇到的仍是會簡單提下。主要核心是闡述一些技巧和原理層面的知識我的理解吧。另外也打算分析一些codepen上炫酷動畫的實現原理，若是有時間可能會分析幾個動畫引擎，固然都是2D的。

再次感謝你閱讀到這裏。下一篇文章見。