svg,canvas波浪效果及svg的path学习记录

28255610-c02c7bc6-6aeb-11e7-95f0-6f7393f5698b.gif

svg主要是利用animate 的 attributeName="d"来改变轨迹

svg常用的M(移动),L(画线),H(平行线,横线),V(垂直线,竖线),Z(从当前点画一条直线到路径的起点)

  

//两个是一样的,只不过一个使用Z来完成闭合

C(三次贝塞尔曲线(波浪线))

三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)，最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点。

CCC.png

S(简写的贝塞尔曲线命令)

一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变）。可以使用一个简写的贝塞尔曲线命令S：S x2 y2, x y (or s dx2 dy2, dx dy)，S命令可以用来创建与之前那些曲线一样的贝塞尔曲线，但是，如果S命令跟在一个C命令或者另一个S命令的后面，它的第一个控制点，就会被假设成前一个控制点的对称点。如果S命令单独使用，前面没有C命令或者另一个S命令，那么它的两个控制点就会被假设为同一个点

SSS.png

 
//S的第一个控制点是65 10 对于95 80的对称点,也就是125,150,第二个控制点是150 150

Q(二次贝塞尔曲线)

二次贝塞尔曲线Q比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。需要两组参数，控制点和终点坐标。x1y1为控制点坐标,xy为终点坐标Q命令：Q x1 y1, x y (or q dx1 dy1, dx dy)

QQQ.png

T(简写的二次贝塞尔曲线命令)
快捷命令T会通过前一个控制点，推断出一个新的控制点。这意味着，在你的第一个控制点后面，可以只定义终点，就创建出一个相当复杂的曲线。需要注意的是，T命令前面必须是一个Q命令，或者是另一个T命令，才能达到这种效果。如果T单独使用，那么控制点就会被认为和终点是同一个点，所以画出来的将是一条直线。

TTT.png

//跟着Q后面的T的控制点是52.5 10 对于95 80的对称点137.5 150

A(弧线)
命令:A rx(x轴半径) ry(y轴半径) x-axis-rotation(弧形的旋转情况:0~180) large-arc-flag(角度大小,决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧) sweep-flag(弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧) x y(终点坐标)

AAA.png