Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
个人觉得二次贝赛曲线是运用最多的路径之一,总的来说,它可以分为两段,第一段,可以用来承接前一个路径,可以使路径弯曲光滑.
然后浅谈一下二次贝赛曲线,
结果显示如下:
[img]http://dl2.iteye.com/upload/attachment/0119/9777/08952686-c852-3eb9-9941-dfdbc2c02d34.png[/img]
M坐标1 q坐标2 坐标3;
不难看出,坐标1为起始点坐标,坐标2为上图黄蓝两线交点坐标,坐标3为路径终点坐标;若承接前一段路径,可省去 M坐标1 ;
其实,二次贝赛曲线是这样炼成的:
[img]http://dl2.iteye.com/upload/attachment/0119/9779/c337826d-3ec5-3eac-adbb-37a64c4b5558.gif[/img]
个人觉得二次贝赛曲线是运用最多的路径之一,总的来说,它可以分为两段,第一段,可以用来承接前一个路径,可以使路径弯曲光滑.
然后浅谈一下二次贝赛曲线,
<!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>结果显示如下:
[img]http://dl2.iteye.com/upload/attachment/0119/9777/08952686-c852-3eb9-9941-dfdbc2c02d34.png[/img]
M坐标1 q坐标2 坐标3;
不难看出,坐标1为起始点坐标,坐标2为上图黄蓝两线交点坐标,坐标3为路径终点坐标;若承接前一段路径,可省去 M坐标1 ;
其实,二次贝赛曲线是这样炼成的:
[img]http://dl2.iteye.com/upload/attachment/0119/9779/c337826d-3ec5-3eac-adbb-37a64c4b5558.gif[/img]
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
