今天就跟大家聊聊有關(guān)如何使用canvas繪制貝塞爾曲線,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
目前創(chuàng)新互聯(lián)已為1000+的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站運(yùn)營、企業(yè)網(wǎng)站設(shè)計(jì)、南沙網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
1、二次貝塞爾曲線
quadraticCurveTo(cpx,cpy,x,y) //cpx,cpy表示控制點(diǎn)的坐標(biāo),x,y表示終點(diǎn)坐標(biāo);
數(shù)學(xué)公式表示如下:
二次方貝茲曲線的路徑由給定點(diǎn)P0、P1、P2的函數(shù)B(t)追蹤:
代碼實(shí)例:
代碼如下:
canvas直線 二次貝塞爾曲線
代碼效果:
2、三次貝塞爾曲線
bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) //cp1x,cp1y表示第一個(gè)控制點(diǎn)的坐標(biāo),cp2x,cp2y表示第二個(gè)控制點(diǎn)的坐標(biāo),x,y表示終點(diǎn)的坐標(biāo);
數(shù)學(xué)公式表示如下:
P0、P1、P2、P3四個(gè)點(diǎn)在平面或在三維空間中定義了三次方貝茲曲線。曲線起始于P0走向P1,并從P2的方向來到P3。一般不會(huì)經(jīng)過P1或P2;這兩個(gè)點(diǎn)只是在那里提供方向資訊。P0和P1之間的間距,決定了曲線在轉(zhuǎn)而趨進(jìn)P3之前,走向P2方向的“長度有多長”。
代碼實(shí)例:
代碼如下:
canvas直線 三次貝塞爾曲線
代碼效果圖:
是不是很炫酷的效果。HTML5+canvas真是個(gè)好玩的東西。
看完上述內(nèi)容,你們對(duì)如何使用canvas繪制貝塞爾曲線有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。