html5 Canvas 路徑用于在html5畫布上繪制多種類型的形狀（線，圓，多邊形等），路徑用于在HTML5畫布上繪制多種類型的形狀

HTML5 Canvas路徑是一系列點(diǎn)，這些點(diǎn)之間有繪制指令。例如，一系列點(diǎn)之間有直線，或者它們之間有弧。

路徑用于在HTML5畫布上繪制多種類型的形狀（線，圓，多邊形等），因此理解這一中心概念非常重要。

開始和結(jié)束路徑 - Path

使用2D上下文函數(shù)beginPath()和可以開始和結(jié)束路徑closePath()，如下所示:

var canvas  = document.getElementById("ex1");var context = canvas.getContext("2d");context.beginPath();
// ...路徑繪制操作
context.closePath();

moveto()

使用路徑繪制時，您使用的是虛擬“筆”或“指針”。該虛擬指針始終位于某個點(diǎn)。使用2D Context函數(shù)完成虛擬指針的移動 moveto(x,y)，如下所示:

context.moveto(10,10);

本示例將指針移至點(diǎn)10、10。

lineto()

該lineto()函數(shù)從虛擬指針的位置到作為參數(shù)傳遞給函數(shù)的點(diǎn)畫一條線lineto()。這是一個示例:

context.beginPath();
context.moveto(10,10);
context.lineto(50,50);
context.closePath();

本示例將指針移動到點(diǎn)10,10，然后從該點(diǎn)繪制一條線到點(diǎn)50，50。

lineto()還將虛擬指針移動到該線的終點(diǎn)。因此，在上面的示例中，指針移動到50,50，同時指示畫布繪制到該點(diǎn)的線。

stroke() + fill()

在您指示2D上下文繪制路徑之前，實(shí)際上不會繪制任何路徑。通過調(diào)用2D上下文stroke()或fill()在2D上下文上完成此操作。
該stroke()函數(shù)將繪制路徑操作定義的形狀輪廓。
該fill()函數(shù)將填寫路徑操作定義的形狀。
這是兩者的示例，stroke()并fill()應(yīng)用于相同的形狀:

示例

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

這是上面代碼的運(yùn)行結(jié)果:

linewidth

您可以使用linewidth 2D上下文的屬性設(shè)置各種筆觸功能繪制的線條的寬度。這是一個示例:

context.linewidth = 10;

上面的示例將所有后續(xù)筆畫繪制操作的線寬設(shè)置為10像素。
這是三條線，線寬分別為1、5和10:

線寬大于1時，線的額外寬度繪制在中心線之外。也就是說，如果您從10,10到100,10畫一條線，線寬為10，則該線實(shí)際上將從10,5開始并延伸到10,15，然后水平延伸到100,5和100,15從那里。像一個矩形。

線帽（lineCap）

使用路徑繪制線條時，可以設(shè)置線條的線帽。線帽定義線尾的繪制方式。
線寬是通過lineCap2D上下文的屬性設(shè)置的。它可以采用以下值:

butt
round
square

該值butt導(dǎo)致線端平坦且與線正交。
該值將round產(chǎn)生一個圓角的線末端，該圓角的半徑等于線寬的一半。
該值square導(dǎo)致在行尾繪制一個矩形。矩形的大小為 line width x line width / 2。
這是說明線帽的一組示例。所有線條的線寬均為10。最左邊的線條使用lineCap值butt。中線使用lineCap值round。最右邊的行使用 lineCap值square

它可以是一個有點(diǎn)難以看到與劃線之間的差lineCap 的值butt和square。因此，我創(chuàng)建了一些使用butt和的線對示例，square它們彼此靠近繪制，以便您可以看到不同之處。頂部或左側(cè)使用butt，底部或右側(cè)使用square。

如您所見，使用lineCap值的線square在末尾繪制了一個額外的矩形，這使線更長了一點(diǎn)。

線條連接（lineJoin）

lineJoin 2D上下文 的屬性定義如何繪制連接兩條線的點(diǎn)。連接兩條線的點(diǎn)稱為“線連接”。該lineJoin屬性可以具有以下值:

miter
bevel
round

這是設(shè)置行聯(lián)接的三個代碼示例:

context.lineJoin = "miter";
context.lineJoin = "bevel";
context.lineJoin = "round";

值的miter結(jié)果導(dǎo)致繪制直線角以用于線連接。
bevel結(jié)果 的值導(dǎo)致繪制直線（直線）角以用于直線連接。
round結(jié)果 的值導(dǎo)致繪制直線圓角以進(jìn)行線連接。
這是三個示例（從左側(cè)開始）miter，bevel并round 用作該lineJoin屬性的值。

arc()

2D上下文功能arc()在畫布上繪制圓弧。

該arc()函數(shù)采用6個參數(shù):

x: 圓弧中心點(diǎn)的x坐標(biāo)

y: 圓弧中心點(diǎn)的y坐標(biāo)

radius: 圓弧半徑

startAngle: 弧起始的弧度角

endAngle: 弧結(jié)束的弧度角

anticlockwise: 設(shè)置插入方向是否為逆時針（不是順時針）。.

這是一個代碼示例:

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度。您可能已經(jīng)注意到，從0到360的度數(shù)將轉(zhuǎn)換為弧度。
這是在畫布上繪制代碼示例的樣子:

這是相同的代碼示例，但anticlockwise設(shè)置為true：

要繪制一個完整的圓，簡單的設(shè)置startAngle來0并 endAngle以2 * Math.PI等于(Math.PI / 180) * 360

arcTo()

2D上下文具有一個arcTo()功能，但是可以使用lineto()和來模仿其功能arc()，因此我將跳過它

quadraticCurveto()

該quadraticCurveto()函數(shù)從一個點(diǎn)到另一個點(diǎn)繪制二次Bezier曲線。該曲線由單個控制點(diǎn)控制。這是一個代碼示例:

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

此代碼示例使用控制點(diǎn)75、100（cpX，cpy）繪制了一條從50、50到100、50的曲線。結(jié)果曲線如下所示:

畫布上的小點(diǎn)是我在此處繪制的控制點(diǎn)。它通常不是曲線的一部分

bezierCurveto()

該bezierCurveto()函數(shù)從一點(diǎn)到另一點(diǎn)繪制三次貝塞爾曲線。三次貝塞爾曲線具有2個控制點(diǎn)，而二次貝塞爾曲線僅具有1個控制點(diǎn)。這是一個代碼示例:

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, toY);
context.stroke();
context.closePath();

此代碼示例使用控制點(diǎn)100、100（cp1X，cp1Y）和250、100（cp2X，cp2Y）繪制從50、50到300、50的曲線。結(jié)果曲線如下所示:

畫布上的兩個小點(diǎn)是我繪制的控制點(diǎn)，用來向您顯示它們的位置。它們未繪制為曲線的一部分。

這是一個使用不同起點(diǎn)，終點(diǎn)和控制點(diǎn)的示例:

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, toY);
context.stroke();
context.closePath();

這是相應(yīng)的曲線: