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>

這是上面代碼的運行結果:

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: 弧結束的弧度角

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的度數將轉換為弧度。
這是在畫布上繪制代碼示例的樣子:

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

要繪制一個完整的圓，簡單的設置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的曲線。結果曲線如下所示:

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

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

這是相應的曲線: