Paths 路径

A path in jCanvas consists of one or more connected lines, arcs, curves, or vectors.
jCanvas中的路径，包括一个或多个连续的直线，圆弧，曲线，向量。

Basic usage 基本用法

You can draw a path using the drawPath() method. It accepts a variable number of arguments which define the different kinds of subpaths within your path. These arguments are defined using p1, p2, p3, and so on (however many as desired).
你可以使用drawPath()方法绘制一个路径。它接收可变数量的参数，这些参数定义了你所绘制路径内的不同类型的子路径。这些参数使用p1,p2,p3等待（想要多少写多少）来定义。
Note that for each of these subpath arguments, you must specify the type of the subpath (for instance, type: 'line').
注意，对于每段子路径参数来说，你必须指定子路径的类型（例如type:'line'）

// Draw the outline of a cartoon face 画卡通脸的轮廓
$('canvas').drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  p1: {
    type: 'line',
    x1: 200, y1: 50,
    x2: 100, y2: 150,
    x3: 200, y3: 150,
    x4: 120, y4: 200
  },
  p2: {
    type: 'quadratic',
    cx1: 175, cy1: 250,
    x2: 225, y2: 200
  }
});

Now, if you were to draw the quadratic curve in the above example using the drawQuadratic() method, you must specify the x1 and y1 properties. However, using drawPath() the curve continues from the last point on the previous subpath (p1).
现在，如果你使用drawQuadratic()方法，来画上边例子中那样的二次曲线的话，你必须定义x1和y1属性，但使用drawPath()的话，曲线会接着之前子路径(p1)的最后一点继续画。
If you were to include the x1 and y1 properties, the curve would no longer be connected to the previous subpath. Consider the following example.
如果你包含了x1和y1属性，曲线就不再接着前一个子路径了，思考下边的例子。

// Draw a face with the jaw disconnected 画脸，下巴不连接的
$('canvas').drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  p1: {
    type: 'line',
    x1: 200, y1: 50,
    x2: 100, y2: 150,
    x3: 200, y3: 150,
    x4: 120, y4: 200
  },
  p2: {
    type: 'quadratic',
    x1: 130, y1: 210,
    cx1: 180, cy1: 250,
    x2: 225, y2: 200
  }
});

Arcs 圆弧

You can also use the drawPath() method to create sequences of interconnected arcs.
你也可以使用drawPath方法来创建互相连接的一串圆弧。
The following example will create a flower shape using arcs.
下边的例子会使用圆弧创建一个花的形状。

$('canvas')
.drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  closed: true,
  x: 160, y: 150,
  // Top petal 顶花瓣
  p1: {
    type: 'arc',
    x: 0, y: -50,
    start: -90, end: 90,
    radius: 50
  },
  // Right petal 右花瓣
  p2: {
    type: 'arc',
    x: 50, y: 0,
    start: 0, end: 180,
    radius: 50
  },
  // Bottom petal 底花瓣
  p3: {
    type: 'arc',
    x: 0, y: 50,
    start: 90, end: 270,
    radius: 50
  },
  // Left petal 左花瓣
  p4: {
    type: 'arc',
    x: -50, y: 0,
    start: 180, end: 360,
    radius: 50
  }
});

Note that the x and y coordinates for each subpath are relative to the x and y coordinates of the entire path.
注意每段子路径的x``y坐标，都是相对于整个路径的x``y坐标的。
Also note that the subpath objects inherit default property values from the global jCanvas preferences (which is set through the jCanvas() method).
还要注意，子路径对象从全局jCanvas参数设置中，继承了默认属性值（通过jCanvas方法设置的）。

Arrows 箭头

Just like every other path type in jCanvas, generic paths support arrows at either end of the path. See the section on arrows for descriptions of the arrow properties.
就像jCanvas中每个其它路径类型那样，一般路径都支持在其每个路径端点处显示箭头。参照箭头部分，来获取箭头的属性描述。
For generic paths, arrow properties must be specified in a subpath object, not the entire path object.
对于一般路径来说，arrow属性必须被指定在一个子路径对象中，而不是整个路径对象。

// Draw the outline of a cartoon face 画卡通轮的轮廓
$('canvas').drawPath({
  strokeStyle: '#000',
  strokeWidth: 4,
  p1: {
    type: 'vector',
    startArrow: true,
    arrowAngle: 60,
    arrowRadius: 30,
    x: 200, y: 50,
    a1: 225, l1: 200,
  },
  p2: {
    type: 'quadratic',
    cx1: 150, cy1: 250,
    x2: 225, y2: 200,
    endArrow: true,
    arrowAngle: 60,
    arrowRadius: 30
  }
});