SVG_38_path标签之字母Q_二次贝塞尔曲线

昨天的文章中用到了三次贝塞尔曲线--SVG_37_六一儿童节快乐-路径移动-火焰文字,那么接下来几篇文章围绕着贝塞尔曲线说明一下。

相对于circle、rect、ellipse、polygon等固定的图形,在绘制曲线时,line是一条直线,polyline是折线,而path标签代表了圆滑。

path标签可以很灵活的绘制各种图形,上面提到的各种标签,都可以使用path标签绘制出来。

前面有文章对path进行了说明,如

SVG_5_矢量图_Path标签_弧线世界开启

SVG_18_a标签_clipPath标签_限制路径效果

SVG_23_mpath标签_轨迹复用

今天继续看一下之前没有介绍到的贝塞尔曲线。

path标签中,最重要的莫属于d属性了,d属性里包含了很多的字母特性,如

M、L、V、H、Z等字母已在SVG_5_矢量图_Path标签_弧线世界开启里介绍,这里再简单复述一次。


d属性:里面的坐标成对出现,一般我们把一对标签中间用逗号隔开,标签之间使用空格隔开。

以下字母区分大小写,大写表示绝对坐标,小写表示相对坐标。

字母M:Move to 表示开始点坐标,在它之后的坐标作为开始点。

字母L:Line to  表示直线,会从上一坐标绘制直线到此坐标。

字母V:Vertical 表示垂直的直线,即y坐标,这里单独写一个y坐标即可。

字母H:Horizontal表示水平的直线,即x坐标,这里单独写一个x坐标即可。

字母Z:表示闭合图形,会把Z之前的坐标和M的开始坐标直接连起来。

字母A:Arc to,表示绘制曲线、弧线。

    

代码运行效果

SVG_38_path标签之字母Q_二次贝塞尔曲线_第1张图片



好了上面算是回顾了一下path标签其他字母的使用,接着进入今天的主角Q。

下面看一下字母Q的特性。除了Q还有C、S等,由于篇幅问题,先介绍字母Q的用法。

字母Q表示二次贝塞尔曲线

Q cx, cy  x, y

第一个参数和第二个参数是一对儿坐标,表示贝塞尔曲线控制点坐标,可以理解为两条曲线的切线,连接出来的焦点。

第三个和第四个参数是一对儿坐标,表示贝塞尔曲线的终点坐标。

 

    

效果图

SVG_38_path标签之字母Q_二次贝塞尔曲线_第2张图片

黑色线是做出的切线,两线焦点是控制点的坐标(示意图)。

SVG_38_path标签之字母Q_二次贝塞尔曲线_第3张图片

下一篇讲三次贝塞尔曲线。

 

Xi说孔方兄认证

SVG_38_path标签之字母Q_二次贝塞尔曲线_第4张图片

你可能感兴趣的:(SVG,SVG,Xi说SVG,Xi说孔方兄,贝塞尔曲线)