个人觉得二次贝赛曲线是运用最多的路径之一,总的来说,它可以分为两段,第一段,可以用来承接前一个路径,可以使路径弯曲光滑.
然后浅谈一下二次贝赛曲线,
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <svg id="svg" xmlns="http://www.w3.org/2000/svg" width=100% height="700"> <!--一条二次贝赛曲线--> <path d="M250,250 q-100,100 150,0" stroke="#cd0000" stroke-width="2" fill="none" /> <!--左侧切线--> <path d="M250,250 150,350" stroke="blue" stroke-width="2" fill="none" /> <!--右侧切线--> <path d="M150,350 400,250" stroke="yellow" stroke-width="2" fill="none" /> <!--两条切线的中点相连--> <path d="M200,300 275,300" stroke="red" stroke-width="2" fill="none" /> <path d="M250,100 q100,100 150,0" stroke="#cd0000" stroke-width="2" fill="none" /> <path d="M250,100 350,200" stroke="blue" stroke-width="2" fill="none" /> <path d="M350,200 400,100" stroke="yellow" stroke-width="2" fill="none" /> <path d="M300,150 375,150" stroke="red" stroke-width="2" fill="none" /> </svg> </body> </html>
结果显示如下:
M坐标1 q坐标2 坐标3;
不难看出,坐标1为起始点坐标,坐标2为上图黄蓝两线交点坐标,坐标3为路径终点坐标;若承接前一段路径,可省去 M坐标1 ;
其实,二次贝赛曲线是这样炼成的:
