SVG Path

01. Path 路径

02. Path 基础用法

指令A是用于画弧度的计算和作用 以及对应的圆弧的画法的基础用法
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y

// 关于svg在cavance的一些基础用法
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);
// A rx ry x-axis-rotation large-arc-flag sweep-flag x y
<!-- 小角度弧 & 逆时针 -->
<path
  d="M80 80
      A 45 45, 0, 0, 0, 125 125
      L 125 80 Z"
  fill="green"
/>
<!-- 大角度弧 & 逆时针 -->
<path
  d="M230 80
      A 45 45, 0, 1, 0, 275 125
      L 275 80 Z"
  fill="red"
/>
<!-- 小角度弧 & 顺时针 -->
<path
  d="M80 230
      A 45 45, 0, 0, 1, 125 275
      L 125 230 Z"
  fill="purple"
/>
// 大角度弧 & 顺时针
<path
  d="M230 230
      A 45 45, 0, 1, 1, 275 275
      L 275 230 Z"
  fill="blue"
/>

矩型的普通的path画法

在我们开始画图之前，我们先了解一下 canvas 的坐标体系（x,y）。canvas 是一个二维网格，原点 (0,0) 在左上角，所有元素的位置都相对于原点定位取正数。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，它的坐标就是 (x,y)：

这是path中关于D属性的一些基础的用法

• d：一个点集数列以及其它关于如何绘制路径的信息，它的规则是 “命令+参数”。
  • M x y = moveto，移动笔触到 (x,y)
  • L x y = lineto，会将当前位置和新位置 (x,y) 连线
  • H x = horizontal lineto，在水平方向上移动并连线
  • V y = vertical lineto，在垂直方向上移动并连线
  • C x1 y1, x2 y2, x y = curveto，三次贝塞尔曲线
    • (x1,y1) 是起点的控制点
    • (x2,y2) 是终点的控制点
    • (x,y) 是曲线的终点
  • S x2 y2, x y = smooth curveto，简写的三次贝塞尔曲线
    • 如果跟在一个 C 或 S 命令后面，则它的第一个控制点会被假设成前一个命令曲线的第二个控制点的中心对称点
    • 如果单独使用，即前面没有 C 或 S 命令，那当前点将作为第一个控制点。
  • Q x1 y1, x y = quadratic Bézier curve，二次贝塞尔曲线
    • (x1,y1) 是起点
    • (x,y) 是曲线的终点
  • T x y = smooth quadratic Bézier curveto，简写的二次贝塞尔曲线
    • 如果跟在一个 Q 或 T 命令后面，它会通过前一个控制点，推断出一个新的控制点
    • 如果单独使用，那么控制点就会被认为和终点是同一个点，即将是一条直线。
  • A = elliptical Arc，弧形，详情见下方
  • Z = closepath，闭合路径，从当前点画一条直线到路径的起点，不区分大小写

每一个命令都有两种表示方式，

• 大写字母，表示采用绝对定位。
• 小写字母，表示采用相对定位（例如：从上一个点开始，向上移动 10px，向左移动 7px）。

其实在point中也有同样的效果；