概述基本路徑繪製命令列和曲線

Created: November-22, 2018

==================

TODO：將以下每個繪圖命令連結到各個示例。我不知道如何執行此操作，因為指向各個示例的連結指向 draft 資料夾。

TODO：為這些路徑 action 命令新增示例：stroke()，fill（），clip()

==================

路徑

路徑定義了一組線條和曲線，可以在畫布上可視地繪製。

畫布上不會自動繪製路徑。但是路徑的線條和曲線可以使用可調整的筆劃繪製到畫布上。線條和曲線建立的形狀也可以填充樣式填充。

路徑在 Canvas 上繪製之外的用途：

基本路徑繪製命令是：

context.beginPath()

開始組裝一組新的路徑命令，並丟棄任何先前組裝的路徑。

丟棄是一個重要且經常被忽視的問題。如果未開始新路徑，則將自動重繪以前發出的任何路徑命令。

它還將繪圖筆移動到畫布的左上角原點（== coordinate [0,0]）。

context.moveTo(startX, startY)

將當前筆位置移動到座標[startX，startY]。

預設情況下，所有路徑圖都連線在一起。因此，一條線或曲線的終點是下一條線或曲線的起點。這可能導致連線兩個相鄰圖紙的意外線條。context.moveTo 命令基本上拾取繪圖筆並將其放置在新座標處，因此不繪製自動連線線。

context.lineTo(endX, endY)

從當前筆位置繪製線段以協調[endX，endY]

你可以組合多個 .lineTo 命令來繪製折線。例如，你可以組合 3 個線段以形成三角形。

context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)

給定中心點，半徑和起始和結束角度的圓弧。角度表示為弧度。要將度數轉換為弧度，你可以使用以下公式：radians = degrees * Math.PI / 180;。

角度 0 直接面向弧的中心。要繪製一個完整的圓，你可以使 endsAngle = startingAngle + 360 度（360 度== Math.PI 2）：`context.arc（10,10,20,0，Math.PI 2）;

預設情況下，弧順時針繪製，可選[true | false]引數指示弧逆時針繪製：context.arc(10,10,20,0,Math.PI*2,true)

context.quadraticCurveTo(controlX, controlY, endingX, endingY)

繪製從當前筆位置開始到給定結束座標的二次曲線。另一個給定的控制座標確定曲線的形狀（曲率）。

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

繪製從當前筆位置開始到給定結束座標的三次貝塞爾曲線。另外兩個給定的控制座標確定曲線的形狀（曲率）。

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

繪製具有給定半徑的圓弧。在當前筆位置形成的楔形內部順時針繪製弧，並給出兩點：Point1 和 Point2。

在弧之前自動繪製連線當前筆位置和弧開始的線。

context.rect(leftX, topY, width, height)

給定左上角和寬度和高度的矩形。

context.rect 是一個獨特的繪圖命令，因為它新增了斷開連線的矩形。這些斷開連線的矩形不會通過線自動連線。

context.closePath()

從當前筆位置繪製一條線回到起始路徑座標。

例如，如果你繪製 2 條線形成一個三角形的兩條腿，closePath 將通過將第三條腿的第三條腿從第二條腿的端點拉回到第一條腿的起點來關閉三角形。

此命令的名稱經常導致它被誤解。context.closePath 不是 context.beginPath 的結尾分隔符。同樣，closePath 命令繪製一條線 - 它不會關閉一條線。