HTML5的画布：Paths

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

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

行加入

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

• 斜切
• 斜角
• 圆

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

context.lineJoin =“斜切”; 
context.lineJoin =“伞”; 
context.lineJoin =“圆”;

值为斜切正在绘制的线连接结果在一个三角形的角落。

值为斜面被绘制线条连接在一个平面（线性）一角的结果。

值为轮正在绘制的线条连接导致了圆角。

这里有三个例子显示（左起）斜角，斜面和圆 作为价值的lineJoin财产。

弧（）

二维上下文功能弧（）画在画布上的弧。

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

• x：圆弧的中心点的x坐标。
• ?：y坐标圆弧的中心点。
• 半径：圆弧的半径。
• 由startAngle：弧度从该圆弧开始角。
• endAngle：在电弧结束于该弧度角。
• 逆时针：套的方向是否绘制的是逆时针还是不（=不顺时针方向）。

下面是一个代码示例：

context.lineWidth = 3; 

VAR X = 50; 
VAR Y = 50; 
VAR半径= 25; 
VAR由startAngle =（Math.PI / 180）* 45; 
VAR endAngle =（Math.PI / 180）* 90; 
VAR逆时针=假; 

context.beginPath（）; 
context.arc（X，Y，半径，由startAngle，endAngle，逆时针）; 
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玩具= 50; 
VAR CPX = 75; 
VAR CPY = 100; 

context.beginPath（）; 
context.moveTo（fromX，fromY） ; 
context.quadraticCurveTo（CPX，CPY，TOX，玩具）; 
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玩具= 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，玩具）; 
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玩具= 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，玩具）; 
context.stroke（）; 
context.closePath（）;

这里是相应的曲线：

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