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();
mov eto ()
使用路径绘制时，您使用的是虚拟“笔”或“指针”。该虚拟指针始终位于某个点。使用2D Context 函数 完成虚拟指针的移动 mov eto (x,y)，如下所示:
context.mov eto (10,10);
本示例将指针移至点10、10。
lin eto ()
该lin eto () 函数 从虚拟指针的位置到作为参数传递给 函数 的点画一条线lin eto ()。这是 一个 示例:
context.beginPath(); context.mov eto (10,10); context.lin eto (50,50); context.closePath();
本示例将指针移动到点10,10，然后从该点绘制一条线到点50，50。
lin eto ()还将虚拟指针移动到该线的终点。因此，在上面的示例中，指针移动到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.mov eto (10,10);
context.lin eto (60,50);
context.lin eto (110,50);
context.lin eto (10,10);
context. stroke ();
context.closePath();
context.beginPath();
context.mov eto (100,10);
context.lin eto (150,50);
context.lin eto (200,50);
context.lin eto (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。最右边的行使用 lineCap值square
它可以是 一个 有点难以看到与划线之 间的 差lineCap 的值butt和square。因此，我创建了一些使用butt和的线对示例，square它们彼此靠近绘制，以便您可以看到不同之处。顶部或左侧使用butt， 底部 或右侧使用square。
如您所见，使用lineCap值的线square在末尾绘制了 一个 额外的矩形，这使线更长了一点。
线条连接（lineJoin）
lineJoin 2D上下文 的 属性 定义如何绘制连接两条线的点。连接两条线的点称为“线连接”。该lineJoin 属性 可以具有以下值:
miter
bevel
round这是设置行联接的三个 代码 示例:
context.lineJoin?=?"miter"; context.lineJoin?=?"bevel"; context.lineJoin?=?"round";值的miter结果导致绘制直线角以用于线连接。
bevel结果 的值导致绘制直线（直线）角以用于直线连接。
round结果 的值导致绘制直线圆角以进行线连接。
这是三个示例（从左侧开始）miter，bevel并round 用作该lineJoin 属性 的值。
arc()
2D上下文 功能 arc()在画布上绘制圆弧。
该arc() 函数 采用6个参数:
x: 圆弧中心点的x坐标
y: 圆弧中心点的y坐标
radius: 圆弧半径
startAngle: 弧起始的弧度角
endAngle: 弧结束的弧度角
antic lockwise : 设置插入方向是否为逆时针（不是顺时针）。.
这是 一个 代码 示例:
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?antic lockwise ?=?false; context.beginPath(); context.arc(x,?y,?radius,?startAngle,?endAngle,?antic lockwise ); context. stroke (); context.closePath();此 代码 示例绘制 一个 圆弧，其圆心为50、50，半径为25个像素，从45度开始一直延伸到180度。您可能已经注意到，从0到360的度数将转换为弧度。
这是在画布上绘制 代码 示例的样子:
这是相同的 代码 示例，但antic lockwise 设置为true：
arcTo()
2D上下文具有 一个 arcTo() 功能 ，但是可以使用lin eto ()和来模仿其 功能 arc()，因此我将跳过它
qua drat icCurv eto ()
该qua drat icCurv eto () 函数 从 一个 点到另 一个 点绘制二次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.mov eto (fromX,?fromY); context.qua drat icCurv eto (cpX,? cpy ,?toX,?toY); context. stroke (); context.closePath();此 代码 示例使用控制点75、100（cpX， cpy ）绘制了一条从50、50到100、50的曲线。结果曲线如下所示:
画布上的小点是我在此处绘制的控制点。它通常不是曲线的一部分
bezierCurv eto ()
该bezierCurv eto () 函数 从一点到另一点绘制三次贝塞尔曲线。三次贝塞尔曲线具有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.mov eto (fromX,?fromY); context.bezierCurv eto (cp1X,?cp1Y,?cp2X,?cp2Y,?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.mov eto (fromX,?toY); context. stroke (); context.closePath();这是相应的曲线:
同样，两个小点是我明确渲染的控制点
HTML5 Canvas 渐变 ? ?HTML5 Canvas 清除画布声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did92381