對於想要了解path標籤其他字母屬性和相關path使用的朋友,可以參看以下文章
貝塞爾曲線百科
貝塞爾曲線(Bézier curve),又稱貝茲曲線或貝濟埃曲線,是應用於二維圖形應用程序的數學曲線。一般的矢量圖形軟件通過它來精確畫出曲線,貝茲曲線由線段與節點組成,節點是可拖動的支點,線段像可伸縮的皮筋,我們在繪圖工具上看到的鋼筆工具就是來做這種矢量曲線的。貝塞爾曲線是計算機圖形學中相當重要的參數曲線,在一些比較成熟的位圖軟件中也有貝塞爾曲線工具,如PhotoShop等。在Flash4中還沒有完整的曲線工具,而在Flash5裏面已經提供出貝塞爾曲線工具。
簡單一句話總結:貝塞爾曲線是可以通過控制點靈活控制的曲線。
今日知識點:
二次貝塞爾曲線其實是三次貝塞爾曲線的特殊形式,兩個控制點座標是同一個,三次貝塞爾曲線是有兩個控制點的。
C c1x,c1y c2x,c2y x,y
字母C之後:
c1x,c1y這一對兒座標表示第一個控制點;
c2x,c2y這一對兒座標表示第二個控制點;
x,y這一對兒座標表示終點座標;
<!-- 繪製各種曲線是,M起點座標一定是要的
C標籤:C c1x,c1y c2x,c2y x,y
三次貝塞爾曲線,
字母C之後:
c1x,c1y這一對兒座標表示第一個控制點;
c2x,c2y這一對兒座標表示第二個控制點;
x,y這一對兒座標表示終點座標;-->
<path d="M20,20C30,200 400,200 200,10" fill="none" stroke="red" />
左側切線交點座標爲控制點1,
右側切線交點座標爲控制點2。
(示意圖,湊活看)
下方是隨意做了一個圖形效果
Xi說孔方兄認證