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，表示绘制曲线、弧线。

代码运行效果

---

---

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

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

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

Q cx, cy  x, y

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

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

 

效果图

黑色线是做出的切线，两线焦点是控制点的坐标（示意图）。

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

 

Xi说孔方兄认证