https://www.cnblogs.com/dxy1982/archive/2012/04/06/2395729.html

路径 - path元素

  这个是最通用,最强力的元素了;使用这个元素你可以实现任何其他的图形,不仅包括上面这些基本形状,也可以实现像贝塞尔曲线那样的复杂形状;

  此外,使用path可以实现平滑的过渡线段,虽然也可以使用polyline来实现这种效果,但是需要提供的点很多,而且放大了效果也不好。

  这个元素控制位置和形状的只有一个参数:

d:

一系列绘制指令绘制参数(点)组合成。

绘制指令

分为绝对坐标指令和相对坐标指令两种,

这两种指令使用的字母是一样的,就是大小写不一样。

  • 绝对指令使用大写字母,坐标也是绝对坐标;
  • 相对指令使用对应的小写字母,点的坐标表示的都是偏移量。

绝对坐标绘制指令

  这组指令的参数代表的是绝对坐标。假设当前画笔所在的位置为(x0,y0),则下面的绝对坐标指令代表的含义如下所示:

指令 参数 说明
M x y 将画笔移动到点(x,y)
L x y 画笔从当前的点绘制线段到点(x,y)
H x 画笔从当前的点绘制水平线段到点(x,y0)
V y 画笔从当前的点绘制竖直线段到点(x0,y)
A rx ry x-axis-rotation large-arc-flag sweep-flag x y 画笔从当前的点绘制一段圆弧到点(x,y)
C x1 y1, x2 y2, x y 画笔从当前的点绘制一段三次贝塞尔曲线到点(x,y)
S x2 y2, x y 特殊版本的三次贝塞尔曲线(省略第一个控制点)
Q x1 y1, x y 绘制二次贝塞尔曲线到点(x,y)
T x y 特殊版本的二次贝塞尔曲线(省略控制点)
Z 无参数 绘制闭合图形,如果d属性不指定Z命令,则绘制线段,而不是封闭图形。
  • 移动画笔指令M
  • 画直线指令:L,H,V
  • 闭合指令Z都比较简单
文档更新时间: 2019-09-03 06:27   作者:admin