Arrows 箭头

You can draw arrows in the same way you draw lines or curves, except that you must provide some arrow-specific properties.
你可以用画直线或曲线的方法来画箭头，但必须要提供一些箭头特有的属性。

Basic Usage 基本用法

There are four basic properties which you can use to add an arrow to an existing path:
下边是四个基本属性，用来给已存在的路径添加箭头：

startArrow: A boolean indicating if an arrow is drawn at the start point of the path
startArrow：布尔值，代表箭头是否在路径的起始点绘制。

endArrow: A boolean indicating if an arrow is drawn at the end point of the path
endArrow：布尔值，代表箭头是否在路径的终止点绘制。

arrowAngle: The angle between the two tips of the angle (optional; defaults to 90)
arrowAngle：角度，箭头的两个边的夹角（可选，默认为90度）

arrowRadius: A number indicating the length of each tip of the arrow (required)
arrowRadius：数字，代表箭头每个边的长度（必须）

Note that you are not required to specify both the startArrow and endArrow properties. However, you must specify one or the other, and you may specify both.
注意，你不必同时定义startArrow和endArrow属性，但你必须指定一个或另一个，也可以两个都指定。

Lines 线

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  startArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x1: 100, y1: 100,
  x2: 150, y2: 125,
  x3: 200, y3: 75
});

Vectors 向量

$('canvas').drawVector({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x: 50, y: 50,
  a1: 180, l1: 100,
  a2: 90, l2: 100
});

Quadratic Curves 二次曲线

$('canvas').drawQuadratic({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 60,
  x1: 50, y1: 50,
  cx1: 200, cy1: 50,
  x2: 250, y2: 200
})

Bézier Curves 贝塞尔曲线

$('canvas').drawBezier({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  startArrow: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x1: 100, y1: 100,
  cx1: 150, cy1: 100,
  cx2: 100, cy2: 200,
  x2: 150, y2: 200,
  cx3: 250, cy3: 200,
  cx4: 100, cy4: 50,
  x3: 250, y3: 100
})

Arcs 圆弧

$('canvas').drawArc({
  strokeStyle: '#000',
  strokeWidth: 4,
  rounded: true,
  endArrow: true,
  arrowRadius: 15,
  arrowAngle: 90,
  x: 160, y: 120,
  start: 90,
  end: 360,
  radius: 50
});

Paths 路径

$('canvas').drawPath({
  strokeStyle: '#000',
  strokeWidth: 5,
  p1: {
    type: 'line',
    x1: 160, y1: 200,
    x2: 160, y2: 50,
    endArrow: true,
    arrowRadius: 30,
    arrowAngle: 90
  },
  p2: {
    type: 'quadratic',
    x1: 160, y1: 50,
    cx1: 160, cy1: 150,
    x2: 100, y2: 200  
  }
});