HTML5 Canvas路径是一系列点，这些点之间有绘制指令。例如，一系列点之间有直线，或者它们之间有弧线。

路径用于在HTML5画布上绘制多种类型的形状(线，圆，多边形等)，因此理解这一中心概念非常重要。

开始和结束路径

使用2D上下文函数" beginPath()"和" closePath()"来开始和结束路径，如下所示：

var canvas  = document.getElementById("ex1");
var context = canvas.getContext("2d");

context.beginPath();

//... path drawing operations

context.closePath();

moveTo()

使用路径绘制时，我们使用的是虚拟"笔"或者"指针"。该虚拟指针始终位于某个点。使用2D上下文函数moveTo(x，y)移动虚拟指针，如下所示：

context.moveTo(10,10);

本示例将指针移至点10、10.

lineTo()

lineTo()函数从虚拟指针的位置绘制一条线作为参数传递给lineTo()函数。这是一个例子：

context.beginPath();

context.moveTo(10,10);
context.lineTo(50,50);

context.closePath();

本示例将指针移动到点10,10，然后从该点绘制一条线到点50，50。

lineTo()还将虚拟指针移动到该线的终点。因此，在上面的示例中，指针移动到50,50，同时指示画布绘制到该点的线。

笔画()+填充()

除非我们指示2D上下文绘制路径，否则实际上不会绘制任何路径。这是通过在2D上下文中调用" stroke()"或者" fill()"来完成的。

stroke()函数将绘制路径操作定义的形状轮廓。

fill()函数将填写路径操作定义的形状。

这是将stroke()和fill()应用于相同形状的示例：

context.beginPath();
context.moveTo(10,10);
context.lineTo(60,50);
context.lineTo(110,50);
context.lineTo(10,10);
context.stroke();
context.closePath();

context.beginPath();
context.moveTo(100,10);
context.lineTo(150,50);
context.lineTo(200,50);
context.lineTo(100,10);
context.fill();
context.closePath();

行宽

我们可以使用2D上下文的lineWidth属性设置各种笔触功能绘制的线条的宽度。这是一个例子：

context.lineWidth = 10;

上面的示例将所有后续笔画绘制操作的线宽设置为10像素。

线宽大于1时，线的额外宽度绘制在中心线之外。也就是说，如果我们绘制的线从10,10到100,10，线宽为10，则该线实际上已经从10,5开始并延伸到10,15，然后水平延伸到100,5和100,15从那里。像一个矩形。

线帽

使用路径绘制线条时，我们可以设置线条的线帽。线帽定义线尾的绘制方式。

线宽是通过2D上下文的" lineCap"属性设置的。它可以采用以下值：

• butt
• round
• square

值"对接"导致线端平坦且与线正交。

值round产生圆角的线端，圆角的半径等于线宽的一半。

值square导致在行尾绘制一个矩形。矩形的大小为"线宽x线宽/ 2"。

这是说明线帽的一组示例。所有线条的线宽均为10. 最左边的线条使用" lineCap"值" butt"。中线使用" lineCap"值" round"。最右边的行使用" lineCap"值" square"。

线连接

2D上下文的" lineJoin"属性定义了如何绘制连接两条线的点。连接两条线的点称为"线连接"。 " lineJoin"属性可以具有以下值：

• 斜接
• 斜角
• 圆形的

这是设置行联接的三个代码示例：

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

" miter"的值导致绘制直线角以用于线连接。

" bevel"的值导致绘制直线(直线)角以进行直线连接。

值round导致为直线连接绘制一个圆角。

弧()

2D Context函数arc()在画布上绘制圆弧。

arc()函数有6个参数：

• x：圆弧中心点的x坐标。
• y：圆弧中心点的y坐标。
• 半径：圆弧半径。
• startAngle：弧起始的角度(以弧度为单位)。
• endAngle：弧线结束处的弧度角。
• 逆时针：设置插入方向是否为逆时针(不是=顺时针)。

这是一个代码示例：

context.lineWidth = 3;

var x = 50;
var y = 50;
var radius = 25;
var startAngle = (Math.PI / 180) * 45;
var endAngle   = (Math.PI / 180) * 90;
var anticlockwise = false;

context.beginPath();
context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
context.stroke();
context.closePath();

此代码示例绘制一个圆弧，其中心点为50、50，半径为25个像素，从45度开始一直持续到180度。我们可能已经注意到，从0到360的度数将转换为弧度。

要绘制一个完整的圆，只需将" startAngle"设置为" 0"，将" endAngle"设置为" 2 \ * Math.PI"，即等于"(Math.PI / 180)\ * 360"。

arcTo()

2D上下文具有arcTo()函数，但是可以使用lineTo()和arc()来模仿其功能，因此我将跳过它。

quadraticCurveTo()

" quadraticCurveTo()"函数绘制从一点到另一点的二次贝塞尔曲线。该曲线由单个控制点控制。这是一个代码示例：

context.lineWidth = 3;

var fromX = 50;
var fromY = 50;
var toX   = 100;
var toY   = 50;
var cpX   = 75;
var cpY   = 100;

context.beginPath();
context.moveTo(fromX, fromY);
context.quadraticCurveTo(cpX, cpY, toX, toY);
context.stroke();
context.closePath();

此代码示例使用控制点75、100(cpX，cpY)绘制了一条从50、50到100、50的曲线。

bezierCurveTo()

" bezierCurveTo()"函数从一点到另一点绘制三次贝塞尔曲线。三次贝塞尔曲线具有2个控制点，而二次贝塞尔曲线仅具有1个控制点。这是一个代码示例：

context.lineWidth = 3;

var fromX = 50;
var fromY = 50;
var toX   = 300;
var toY   = 50;
var cp1X   = 100;
var cp1Y   = 100;
var cp2X   = 250;
var cp2Y   = 100;

context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();

此代码示例使用控制点100、100(cp1X，cp1Y)和250、100(cp2X，cp2Y)绘制从50、50到300、50的曲线。

这是一个使用不同起点，终点和控制点的示例：

context.lineWidth = 3;

var fromX = 50;
var fromY = 50;
var toX   = 300;
var toY   = 50;
var cp1X   = 100;
var cp1Y   = 10;
var cp2X   = 250;
var cp2Y   = 100;

context.beginPath();
context.moveTo(fromX, fromY);
context.bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, toX, toY);
context.stroke();
context.closePath();