canvas 三階貝塞爾曲線擬合圓

回顧

在做這個之前，我還做了

【canvas】網易雲**鯨雲特效『水晶音波』的簡單實現

【canvas】網易雲**鯨雲動效『孤獨星球』的簡單實現

【canvas】實現多種形狀的烟花

其中比較關鍵的是h的長度，其最佳公式為

h =4

(1−cos⁡θ

2)3sin⁡θ

2⋅rh = \frac } ) } } } \cdot r

h=3sin2θ

​4(1

−cos2θ

​)​⋅

r計算出h後，4個點的座標就很容易得到，為

a (r

,0)b

(r,h

)c(r

cos⁡θ+

hsin⁡θ

,rsin⁡θ−

hcos⁡θ

)d(r

cos⁡θ,

rsin⁡θ

)\begin & \textbf a(r,\ \ 0)\\ & \textbf b(r,\ \ h)\\ & \textbf c(r\cos \theta + h\sin \theta,\ \ r\sin \theta - h\cos \theta)\\ & \textbf d(r\cos \theta,\ \ r\sin \theta) \end

​a(r,0

)b(r

,h)c

(rcosθ+h

sinθ,r

sinθ−h

cosθ)d

(rcosθ,r

sinθ)​

關於公式，我從本站的一位博主『你別無選擇』，所寫的一篇部落格『三階貝塞爾曲線擬合圓弧的一般公式』中學到的，這裡註明一下出處。

2\theta = \dfrac

θ=2π

​，效果如下

由於對稱性，我只需要算出其中第一段圓弧的起始點 a

\textbf a

a，控制點 b

\textbf b

b，控制點 c

\textbf c

c，然後旋轉，得到剩餘點的座標，就可以畫圓了。

理解了公式，就可以動手寫**了。

class

cricle
context canvas.getcontext("2d")
* @param  pole 圓心位置
* @param  petal 用 petal 段三階貝塞爾曲線模擬圓
* @param  radius 半徑
* @param  color 圓內填充顏色
* @param  α 將圓旋轉乙個α°
*/constructor
(context, pole, petal, radius, color, α =0)
__init()
this
.data.
foreach
((v, i)
=>);
this
.buffer[
this
.buffer.length]
=this
.buffer[0]
;}__rotate
(p, cosα, sinα)
render()
, 60%, 60%)`;
// this.ctx.fillrect(a[0] - 2, a[1] - 2, 4, 4);
// this.ctx.fillrect(b[0] - 2, b[1] - 2, 4, 4);
// this.ctx.fillrect(c[0] - 2, c[1] - 2, 4, 4);
}this
.ctx.
closepath()
;this
.ctx.fillstyle =
this
.color;
this
.ctx.
fill()
;}}const canvas = document.
getelementbyid
('background');
const pole =
[canvas.width /
2, canvas.height /2]
;const petal =4;
const radius = canvas.width /2*
.5625
;const cricle =
newcricle
(canvas.
getcontext
("2d"
), pole, petal, radius,
'rgba(241, 240, 237, .1)',0
);

4段貝塞爾曲線擬合圓

4段貝塞爾曲線已經可以擬合出圓了。

當然，可以用更多段貝塞爾曲線擬合。

如下，為24段貝塞爾曲線擬合圓

可以利用三階貝塞爾曲線擬合圓，做炫酷的音訊視覺化。

如網易雲**的鯨雲動效『迷幻水波』

『孤獨星球』。這次，我嘗試去實現『迷幻水波』。但是效果不是很好，就不貼原始碼了，也沒放到codepen上，只是展示一下效果圖。如果有興趣，原始碼鏈結在這：github

事不過三，至此，模仿網易雲**鯨雲動效之路就結束了。

貝塞爾曲線擬合

最近寫 需要對資料點進行乙個擬合，想起以前圖形學學的貝塞爾曲線，便整理了一下。貝塞爾曲線 b zier curve 又稱貝茲曲線或貝濟埃曲線，是應用於二維圖形應用程式的數學曲線。一般的向量圖形軟體通過它來精確畫出曲線，貝茲曲線由線段與節點組成，節點是可拖動的支點，線段像可伸縮的皮筋，我們在繪圖工具上...

三階貝塞爾曲線擬合圓弧的一般公式

針對三階貝塞爾曲線擬合圓弧，進行一般性的公式求解，可以表達如下圖所示 通過圓心o作出半徑為1的圓弧a到d，作ab為和cd為圓弧的切線段，長度均為h。這樣，以a b c和d作為三階貝塞爾曲線的控制點，求得使曲線的中點經過e時，對應的h。根據貝塞爾曲線的知識，我們知道三階貝塞爾曲線的引數方程如下，其中a...

Python繪製三階貝塞爾曲線

作者本科畢業設計是做機械人軌跡跟蹤控制，軌跡由函式曲線來描述，本文選取三階貝塞爾曲線為代表進行講解，並展示部分基於python tkinter的實現 首先簡單了解一下什麼是貝塞爾曲線 余弦函式曲線我就不多說了哈！貝塞爾曲線又稱貝茲曲線，是法國工程師皮埃爾.貝塞爾於1962年發表。貝塞爾曲線廣泛應用於...