SVG_38_path标签之字母Q_二次贝塞尔曲线
昨天的文章中用到了三次贝塞尔曲线--SVG_37_六一儿童节快乐-路径移动-火焰文字，那么接下来几篇文章围绕着贝塞尔曲线说明一下。
相对于circle、rect、ellipse、polygon等固定的图形，在绘制曲线时，line是一条直线，polyline是折线，而path标签代表了圆滑。
path标签可以很灵活的绘制各种图形，上面提到的各种标签，都可以使用path标签绘制出来。
前面有文章对path进行了说明，如
今天继续看一下之前没有介绍到的贝塞尔曲线。
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，表示绘制曲线、弧线。
<!-- A标签画弧线， A后面第一个参数表示X轴半径；A后面第二个参数表示Y轴半径；A后面第三个参数表示角度；椭圆时才会用到，因为正圆旋转后不会变的；A后面第四个参数表示弧长，0表示小弧，1表示大弧；A后面第五个参数表示方向，0表示逆时针，1表示顺时针；A后面第六个参数表示终点X坐标；A后面第七个参数表示终点Y坐标；--><path d="M200,200A100 200 0 1 0 300,100" fill="none" stroke="blue" />
代码运行效果
好了上面算是回顾了一下path标签其他字母的使用，接着进入今天的主角Q。
下面看一下字母Q的特性。除了Q还有C、S等，由于篇幅问题，先介绍字母Q的用法。
字母Q表示二次贝塞尔曲线
Q cx, cy x, y
第一个参数和第二个参数是一对儿坐标，表示贝塞尔曲线控制点坐标，可以理解为两条曲线的切线，连接出来的焦点。
第三个和第四个参数是一对儿坐标，表示贝塞尔曲线的终点坐标。
<!-- 绘制各种曲线是，M起点坐标一定是要的Q标签--二次贝塞尔曲线，第一个参数和第二个参数表示贝塞尔曲线的控制点的坐标，可以理解为两条曲线的切线，连接出来的焦点。第三个和第四个参数表示贝塞尔曲线的终点坐标。--><path d="M20,20Q30,100 200,10" fill="none" stroke="red" />
效果图
黑色线是做出的切线，两线焦点是控制点的坐标（示意图）。
下一篇讲三次贝塞尔曲线。
Xi说孔方兄认证