HTML5 Canvas 路徑用于在HTML5畫布上繪制多種類型的形狀（線，圓，多邊形等），路徑用于在HTML5畫布上繪制多種類型的形狀
HTML5 Canvas路徑是一系列點，這些點之間有繪制指令。例如，一系列點之間有直線，或者它們之間有弧。
路徑用于在HTML5畫布上繪制多種類型的形狀（線，圓，多邊形等），因此理解這一中心概念非常重要。
使用2D上下文函數(shù)beginPath()和可以開始和結(jié)束路徑closePath()，如下所示:
var canvas = document.getElementById("ex1");
var context = canvas.getContext("2d");context.beginPath();
// ...路徑繪制操作
context.closePath();使用路徑繪制時，您使用的是虛擬“筆”或“指針”。該虛擬指針始終位于某個點。使用2D Context函數(shù)完成虛擬指針的移動 moveTo(x, y)，如下所示:
context.moveTo(10,10);
本示例將指針移至點10、10。
該lineTo()函數(shù)從虛擬指針的位置到作為參數(shù)傳遞給函數(shù)的點畫一條線lineTo()。這是一個示例:
context.beginPath(); context.moveTo(10,10); context.lineTo(50,50); context.closePath();
本示例將指針移動到點10,10，然后從該點繪制一條線到點50，50。
lineTo()還將虛擬指針移動到該線的終點。因此，在上面的示例中，指針移動到50,50，同時指示畫布繪制到該點的線。
在您指示2D上下文繪制路徑之前，實際上不會繪制任何路徑。通過調(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>測試看看 ?/?這是上面代碼的運行結(jié)果:
您可以使用lineWidth 2D上下文的屬性設(shè)置各種筆觸功能繪制的線條的寬度。這是一個示例:
context.lineWidth = 10;
上面的示例將所有后續(xù)筆畫繪制操作的線寬設(shè)置為10像素。
這是三條線，線寬分別為1、5和10:
線寬大于1時，線的額外寬度繪制在中心線之外。也就是說，如果您從10,10到100,10畫一條線，線寬為10，則該線實際上將從10,5開始并延伸到10,15，然后水平延伸到100,5和100,15從那里。像一個矩形。
使用路徑繪制線條時，可以設(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
它可以是一個有點難以看到與劃線之間的差lineCap 的值butt和square。因此，我創(chuàng)建了一些使用butt和的線對示例，square它們彼此靠近繪制，以便您可以看到不同之處。頂部或左側(cè)使用butt，底部或右側(cè)使用square。
如您所見，使用lineCap值的線square在末尾繪制了一個額外的矩形，這使線更長了一點。
lineJoin 2D上下文 的屬性定義如何繪制連接兩條線的點。連接兩條線的點稱為“線連接”。該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屬性的值。
2D上下文功能arc()在畫布上繪制圓弧。
該arc()函數(shù)采用6個參數(shù):
x: 圓弧中心點的x坐標(biāo)
y: 圓弧中心點的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
2D上下文具有一個arcTo()功能，但是可以使用lineTo()和來模仿其功能arc()，因此我將跳過它
該quadraticCurveTo()函數(shù)從一個點到另一個點繪制二次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的曲線。結(jié)果曲線如下所示:
畫布上的小點是我在此處繪制的控制點。它通常不是曲線的一部分
該bezierCurveTo()函數(shù)從一點到另一點繪制三次貝塞爾曲線。三次貝塞爾曲線具有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的曲線。結(jié)果曲線如下所示:
畫布上的兩個小點是我繪制的控制點，用來向您顯示它們的位置。它們未繪制為曲線的一部分。
這是一個使用不同起點，終點和控制點的示例:
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();
這是相應(yīng)的曲線:
同樣，兩個小點是我明確渲染的控制點