Lines 直线

A line path in jCanvas is, essentially, one or more contiguous line segments.
jCanvas中的直线路径，实质上是一个或多个连续的线段。

Basic Usage 基本用法

You can draw a line path using the drawLine() method. Coordinates are defined using x1, y1, x2, y2, and so on (as many as necessary).
你可以用drawLine方法来画一个直线路径，坐标使用x1,y1,x2,y2等等（要多少写多少）来定义。

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 10,
  x1: 100, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200
});

Closing a line path 闭合直线路径

You can, optionally, close a line path, which will connect its start and end points with an extra line. To do so, use the closed property.
你可以选择闭合一个直线路径，这会使它的起始点和终止点，使用一个额外的直线来连接。为了做到这点，请使用closed属性。

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 10,
  x1: 100, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200,
  closed: true
});

Rounded Corners 圆角

You can round the corners of a line path using the rounded property.
你可以给直线路径绘制圆角，使用rounded属性。

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 10,
  rounded: true,
  x1: 80, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200
});

Plotting an array of points 绘制点数组

If you wish to utilize an array containing your points, you can easily construct the drawLine() object using a loop.
如果你想要使用一个包含了点的数组，你可以很容易地使用循环来构造drawLine()对象。

// The .drawLine() object 对象
var obj = {
  strokeStyle: '#000',
  strokeWidth: 6,
  rounded: true
};

// Your array of points 点数组
var pts = [
  [80, 50],
  [100, 150],
  [200, 100],
  [150, 200]
];

// Add the points from the array to the object 把点从数组中加到对象中
for (var p=0; p<pts.length; p+=1) {
  obj['x'+(p+1)] = pts[p][0];
  obj['y'+(p+1)] = pts[p][1];
}

// Draw the line画线
$('canvas').drawLine(obj);

Dashed lines 虚线

Browsers began recently adopting the ability to create dashed lines. To do so in jCanvas, specify the strokeDash and strokeDashOffset properties.
浏览器最近开始采用创建虚线的能力，为了在jCanvas中做到这点，请指定strokeDash和strokeDashOffset属性。
The strokeDash property accepts an array of one or two numbers, and the strokeDashOffset property accepts a single number. See the Properties page for specific usage details.
strokeDash属性接收一个数组，数组中可以有一或两个数字，strokeDashOffset属性接收一个单独的数字，参照属性那一页来获取特定的用法详情。

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 3,
  strokeDash: [5],
  strokeDashOffset: 0,
  x1: 100, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200
});

Vectors 向量

Instead of the drawLine() method, you can also plot line segments using the drawVector() method (which draws lines using vectors rather than (x, y) coordinates).
你也可以使用drawVector()方法（此方法使用向量，而不使用xy坐标来绘制直线）代替drawLine()方法，绘制线段。