路径
所有的基本形状几乎都是
所有路径的信息都要放入 d 属性当中.
moveto,lineto 和 closepath
每条路径都应该是从 moveto 命令开始.
命令字母为大写的 M,后面紧接着一个使用逗号分隔或者空格分隔的 x 和 y 坐标,这个命令用来设置"笔"的当前位置.
moveto 命令后面跟一个或者多个 lineto 命令,用大写的 L 来表示,它的后面也是跟着一个或者多个用逗号或者空格分隔的 x 和 y 坐标.
看一下例子:
注意第三条路径,它指定了两次 M,这样画笔会画到 (40,40.68)之后,直接将画笔移动到 (60,60) 处,而不会画线. 然后继续画 lineto 指定的路径.
使用 closepath 可以将路径封闭,使用 closepath 会自动画一条返回到路径起始点的直线,直接使用 Z 不用跟其他东西.
使用 closepath 与不使用的区别. 当直接用lineto回到原点时,图形只是视觉上是闭合的,但是其实并没有闭合. 使用Z 时,图形是闭合的. 当我们分别写出来 给它们添加上 stroke-width 时,区别就很明显了.
很难讲清楚,请大家试一试.
相对 moveto 和 lineto
当我们不想用画布的绝对坐标来使用 lineto 时,我们可以依据从前一个点移动了多少距离的方式来使用 lineto.
他们用小写的 m 和 l 来表示.
这两条路径都是一样的.
路径的快捷方式
水平和垂直的 lineto 命令
画一条水平或者垂直的线.
使用 H 命令来画一条水平线. H 20 等价于 L 20 现在的Y.
用 h 命令用相对坐标画水平线.
使用 V 命令来画一条垂直线. V 20 等价于 L 现在的X 20.
用 v 命令用相对坐标画垂直线.
路径快捷方式表示法
可以在 L 和 l 后面放多组坐标.
上面例子中的几个图形完全等价. 这种用法也可以用于相对坐标.
更短的路径表示法:
这两个例子也是等价的.
椭圆弧
椭圆弧命令使用A(绝对定位)或者a(相对定位)的参数:
1.点所在椭圆的 x 半径和 y 半径
2.椭圆的x轴旋转角度 x-axis-rotation
3.large-arc-flag,如果需要圆弧的角度小于180度,其为0,若想大于或等于180度则为1
4.sweep-flag,如果需要弧以负角度绘制则为0,以正角度绘制则为1.
5.终点的 x 坐标和 y 坐标.
以其他弧线格式转换
....
贝塞尔曲线
二次贝塞尔曲线
可以使用 Q 或者 q 命令来指定一次二次贝塞尔曲线.
这段路径的意义是: 曲线起点从 (30,75) 开始,到 (300,120) 结束,控制点在 (240,30).
二次曲线命令后还可以指定多个坐标.
这个意思是: 曲线从(30,100)开始,(100,100)结束,控制点在(80,30),然后绘制一条到(200,80)的曲线,控制点在(130,65).
这条曲线将会是不平滑的曲线.
该如何生成平滑的二次贝塞尔曲线. 使用 T 或者 t 来表示.
从(30,100)开始画到(100,100),并平滑过渡到(200,80)的路径.
三次贝塞尔曲线
单个二次贝塞尔曲线有且只有一个顶点,或者每个曲线段都只有一个凹谷.
指定一条三次贝塞尔曲线使用 C 或者 c 命令.
这条命令后紧接着三组坐标,用来指定起点的控制点,终点的控制点,以及端点.
这条路径是从(20,80)到(200,120),控制点分别在(50,20)和(150,60).
三次贝塞尔曲线也可以在一条命令之后添加更多组坐标.
这条路径是绘制一条从(30,100) 到(100,控制点是(50,50)和(70,20)的三次贝塞尔曲线,
后面有紧接着一条曲线到(65,控制点在(110,130)和(45,150)处.
若想要保持曲线之间的连接平滑.可以使用 S 或者 s 命令.
它与二次曲线的 T 命令相同,新曲线都会把上一条曲线的端点作为起点,并且它的第一个控制点是上一个终点控制点的中心对称点,我们只需要提供下一个端点的控制点,然后接一个端点.
路径和填充
用于标记路径.