HTML5的画布：Paths

HTML5的画布路径是一系列的点与点之间的绘图指令。例如，一系列的点用线在它们之间，或者与它们之间的电弧。

路径用来绘制多种类型的形状（线，圆，多边形等）的HTML5画布上的，所以要理解这个核心概念是很重要的。

开始和关闭路径

路径开始和结束时使用的2D上下文函数调用beginPath（）和closePath（） ，就像这样：

var canvas  = document.getElementById("ex1");var context = canvas.getContext("2d");context.beginPath();//... path drawing operationscontext.closePath();

moveTo()

当使用一个路径图，使用的是虚拟的“笔”或“指针”。这个虚拟指针总是位于在一些点。移动虚拟指针是通过使用2D上下文功能 MOVETO（X，Y） ，就像这样：

context.moveTo(10,10);

lineTo()

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

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

Line Width

context.lineWidth = 10;

这里绘制的1,5和10的线宽三行：

Line Cape

• butt
• round
• square

 

它可以是一个有点难以看到绘制一个线之间的差值的linecap 的价值对接和广场。因此，我创建了使用线对的几个例子对接和广场，拉近彼此，所以你可以看到其中的差别。顶部或左侧线正在使用的对接，和底部或行权使用方。

正如你可以看到，使用该行的linecap价值广场有一个额外的矩形在最后得出，这使该行时间稍长。

行加入

该lineJoin的2D背景的属性定义了点如何绘制两条直线连接。当两个线连接的点被称为“线路连接”。该lineJoin属性可以具有以下值：

• miter
• bevel 
• round 

这里有三个代码示例设置线条连接：

context.lineJoin =“miter”; context.lineJoin =“bevel”; context.lineJoin =“round ”;

这里有三个例子显示lineJoin的取值miter，bevel 和round 。

arc()

The 2D Context function arc() draws an arc on the canvas.

该arc（）函数有6个参数：

• X：圆弧的中心点的x坐标。
• Y：y坐标圆弧的中心点。
• radius：圆弧的半径。
• startAngle：弧度从该圆弧开始角。
• endAngle：在电弧结束于该弧度角。
• anticlockwise：设置化弧线的方向  false顺时针 true为逆时针

下面是一个代码示例：

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（）

二维上下文有一个包含arcTo（）函数，但它的能力可以使用模仿了lineTo（）和弧（） ，所以我会跳过它。

到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（）函数绘制三次Bezier曲线从一个点另一个。三次贝塞尔曲线有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（）;

使用控制点此代码示例绘制一条曲线，从50，50至300，50 100，100（cp1X，cp1Y）和250，100（cp2X，cp2Y）。由此产生的曲线是这样的：

 

在画布上的两个小点是，我已经吸引到你展示他们在哪里的控制点。它们不绘制为曲线的一部分。

下面是使用不同的开始点，结束点和控制点不同的例子：

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（）;

这里是相应的曲线：

此外，两个小点是，我已经明确地呈现的控制点。