HTML5 Canvas 路径用于在HTML5画布上绘制多种类型的形状（线，圆，多边形等），路径用于在HTML5画布上绘制多种类型的形状
HTML5 Canvas路径是一系列点，这些点之间有绘制指令。例如，一系列点之间有直线，或者它们之间有弧。
路径用于在HTML5画布上绘制多种类型的形状（线，圆，多边形等），因此理解这一中心概念非常重要。
开始和结束路径 - Path
使用2D上下文函数beginPath()和可以开始和结束路径closePath()，如下所示:
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");context.beginPath();
// ...路径绘制操作
context.closePath();
moveTo()
使用路径绘制时，您使用的是虚拟“笔”或“指针”。该虚拟指针始终位于某个点。使用2D Context函数完成虚拟指针的移动 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，同时指示画布绘制到该点的线。
stroke() + fill()
在您指示2D上下文绘制路径之前，实际上不会绘制任何路径。通过调用2D上下文stroke()或fill()在2D上下文上完成此操作。
该stroke()函数将绘制路径操作定义的形状轮廓。
该fill()函数将填写路径操作定义的形状。
这是两者的示例，stroke()并fill()应用于相同的形状:
<canvas id="ex1" width="500" height="75" style="border: 1px solid #cccccc;">
HTML5 Canvas not supported
</canvas>
<script>
var canvas = document.getElementById("ex1");var context = canvas.getContext("2d");
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();</script>
LineWidth
您可以使用lineWidth 2D上下文的属性设置各种笔触功能绘制的线条的宽度。这是一个示例:
context.lineWidth = 10;
上面的示例将所有后续笔画绘制操作的线宽设置为10像素。
这是三条线，线宽分别为1、5和10
线宽大于1时，线的额外宽度绘制在中心线之外。也就是说，如果您从10,10到100,10画一条线，线宽为10，则该线实际上将从10,5开始并延伸到10,15，然后水平延伸到100,5和100,15从那里。像一个矩形。
线帽（lineCap）
使用路径绘制线条时，可以设置线条的线帽。线帽定义线尾的绘制方式。
线宽是通过lineCap2D上下文的属性设置的。它可以采用以下值:
- butt
- round
- square
该值butt导致线端平坦且与线正交。
该值将round产生一个圆角的线末端，该圆角的半径等于线宽的一半。
该值square导致在行尾绘制一个矩形。矩形的大小为 line width x line width / 2。
这是说明线帽的一组示例。所有线条的线宽均为10。最左边的线条使用lineCap值butt。中线使用lineCap值round。
线条连接（lineJoin）
lineJoin 2D上下文 的属性定义如何绘制连接两条线的点。连接两条线的点称为“线连接”。该lineJoin属性可以具有以下值:
- miter
- bevel
- round
这是设置行联接的三个代码示例:
context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";
值的miter结果导致绘制直线角以用于线连接。
bevel结果 的值导致绘制直线（直线）角以用于直线连接。
round结果 的值导致绘制直线圆角以进行线连接。
arc()
2D上下文功能arc()在画布上绘制圆弧。
该arc()函数采用6个参数:
- x: 圆弧中心点的x坐标
- y: 圆弧中心点的y坐标
- radius: 圆弧半径
- startAngle: 弧起始的弧度角
- endAngle: 弧结束的弧度角
- anticlockwise: 设置插入方向是否为逆时针（不是顺时针）。
这是一个代码示例:
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的度数将转换为弧度。
arcTo()
2D上下文具有一个arcTo()功能，但是可以使用lineTo()和来模仿其功能arc()，因此我将跳过它
quadraticCurveTo()
该quadraticCurveTo()函数从一个点到另一个点绘制二次Bezier曲线。该曲线由单个控制点控制。这是一个代码示例:
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个控制点。
