使用畫布繪制貝塞爾曲線

1、使用畫布繪制貝塞爾曲線1，二次貝塞爾曲線 quadraticcurveto（cpx，cpy，x，y）/cpx，cpy表示控制點(diǎn)的坐標(biāo)，x，y表示盡頭坐標(biāo)； 數(shù)學(xué)公式表示如下： 二次方貝茲曲線的路徑由給定點(diǎn)p0，p1，p2的函數(shù)b（t）追蹤： 代碼實(shí)例： 復(fù)制代碼 代碼如下： varcontext=canvas.getcontext（&39;2d&39;）;/初始化起點(diǎn)，控制點(diǎn)，盡頭context.beginpath（）; context.moveto（20,170）;context.lineto（130,40）;context.lineto（180,150）;context.s

2、troke（）; /裝點(diǎn)2次貝塞爾曲線context.beginpath（）;context.moveto（20,170）;context.quadraticcurveto（130,40,180,150）;context.strokestyle=紅色;context.stroke（）; 代碼效果： 2，三次貝塞爾曲線 beziercurveto（cp1x，cp1y，cp2x，cp2y，x，y）/cp1x，cp1y表示第一個(gè)控制點(diǎn)的坐標(biāo)，cp2x，cp2y表示其次個(gè)控制點(diǎn)的坐標(biāo)，x，y表示盡頭的坐標(biāo)； 數(shù)學(xué)公式表示如下： p0，p1，p2，p3四個(gè)點(diǎn)在平面或在三維空間中定義了三次方貝茲曲線。曲線

3、開頭于p0向p1，并從p2的方一直到p3。普通不會(huì)經(jīng)過p1或p2；p0和p1之間的間距，打算了曲線在轉(zhuǎn)而趨進(jìn)p3之前，朝p2方向的長度有多長。 代碼實(shí)例： 復(fù)制代碼 代碼如下： 畫布直線正文，h1margin：0;canvasmargin：20px;三次貝塞爾曲線函數(shù)draw（）varcanvas=document.getelementbyid（&39;canvas&39;）;varcontext=canvas.getcontext（&39;2d&39;）;/初始化起點(diǎn)，控制點(diǎn)，盡頭context.beginpath（）;context.moveto（25,175）; context.lineto（60,80）;context.lineto（150,30）;context.lineto（170,150）;context.stroke（）; /繪制3次貝塞爾曲線context.beginpath（）;context.moveto（25,175）;context.beziercurveto（60,80,150,30,170,150）;context.strokestyle=紅色;context.strok