HTML5 Canvas 路径

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>
测试看看 ‹/›

这是上面代码的运行结果:

HTML5 Canvas not supported

LineWidth

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

context.lineWidth = 10;

上面的示例将所有后续笔画绘制操作的线宽设置为10像素。
这是三条线，线宽分别为1、5和10:

HTML5 Canvas not supported

线宽大于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

HTML5 Canvas not supported

它可以是一个有点难以看到与划线之间的差lineCap 的值butt和square。因此，我创建了一些使用butt和的线对示例，square它们彼此靠近绘制，以便您可以看到不同之处。顶部或左侧使用butt，底部或右侧使用square。

HTML5 Canvas not supported

如您所见，使用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属性的值。

HTML5 Canvas not supported

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的度数将转换为弧度。
这是在画布上绘制代码示例的样子:

HTML5 Canvas not supported

这是相同的代码示例，但anticlockwise设置为true：

HTML5 Canvas not supported

要绘制一个完整的圆，简单的设置startAngle来0并 endAngle以2 * Math.PI等于(Math.PI / 180) * 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的曲线。结果曲线如下所示:

HTML5 Canvas not supported

画布上的小点是我在此处绘制的控制点。它通常不是曲线的一部分

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的曲线。结果曲线如下所示:

HTML5 Canvas not supported

画布上的两个小点是我绘制的控制点，用来向您显示它们的位置。它们未绘制为曲线的一部分。
这是一个使用不同起点，终点和控制点的示例:

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();

这是相应的曲线:

HTML5 Canvas not supported


同样，两个小点是我明确渲染的控制点