Curves 曲线

Quadratic Curves 二次曲线

A quadratic curve consists of three components:
一个二次曲线包含三个要素：

1.A start point (x, y)
一个起始点(x,y)
2.A control point to make the curve (cx, cy)
一个控制点，来制作曲线(cx,cy)
3.An end point which becomes the next start point (x, y)
一个终止点，作为下个起始点(x,y)

You can draw one or more contiguous quadratic curves using the drawQuadratic() method.
你可以使用drawQuadratic()方法绘制一个或多个连续的二次曲线。

$('canvas').drawQuadratic({
  strokeStyle: '#000',
  strokeWidth: 5,
  x1: 50, y1: 50, // Start point 起始点
  cx1: 200, cy1: 50, // Control point 控制点
  x2: 200, y2: 200 // End point 终止点
});

Bézier Curves 贝塞尔曲线

A Beziér curve consists of four components:
贝塞尔曲线包含四个要素：

**1.**A start point (x, y)
一个起始点(x,y)
**2.**A first control point (cx, cy)
第一控制点(cx,cy)
**3.**A second control point (cx, cy)
第二控制点(cx,cy)
**4.**An end point which becomes the next start point (x, y)
一个终止点，作为下一个起始点(x,y)

You can draw one or more contiguous Bézier curves using the drawBezier() method.
你可以使用drawBezier()方法绘制一个或多个连续的贝塞尔曲线。

$('canvas').drawBezier({
  strokeStyle: '#000',
  strokeWidth: 5,
  x1: 25, y1: 50, // Start point 起始点
  cx1: 175, cy1: 50, // Control point 控制点
  cx2: 25, cy2: 150, // Control point 控制点
  x2: 175, y2: 150, // Start/end point 起始/终止点
  cx3: 275, cy3: 150, // Control point 控制点
  cx4: 125, cy4: 1, // Control point 控制点
  x3: 300, y3: 50 // Start/end point 起始/终止点
});