天天看點

canvas繪制貝塞爾曲線

1、繪制二次方貝塞爾曲線

quadraticCurveTo(cp1x,cp1y,x,y); 其中參數cp1x和cp1y是控制點的坐标,x和y是終點坐标

數學公式表示如下:

二次方貝茲曲線的路徑由給定點P0、P1、P2的函數B(t)追蹤:

canvas繪制貝塞爾曲線
canvas繪制貝塞爾曲線
canvas繪制貝塞爾曲線

2、三次方貝塞爾曲線

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)  其中參數cp1x,cp1y表示第一個控制點的坐标, cp2x,cp2y表示第二個控制點的坐标, x,y是終點的坐标;

P0、P1、P2、P3四個點在平面或在三維空間中定義了三次方貝茲曲線。曲線起始于P0走向P1,并從P2的方向來到P3。一般不會經過P1或P2;這兩個點隻是在那裡提供方向資訊。P0和P1之間的間距,決定了曲線在轉而趨進P3之前,走向P2方向的“長度有多長”。

canvas繪制貝塞爾曲線
canvas繪制貝塞爾曲線
canvas繪制貝塞爾曲線

繼續閱讀