Canvas 03 常見的繪製路徑方法

Canvas 提供了一個靈活的繪圖環境，讓我們可以在網頁上繪製各種圖形和動畫。本章將介紹 Canvas 中常用的繪製方法。

繪製路徑

Canvas 中可以通過相應的方法來繪製圖形的路徑。這些路徑表示我們想要繪製的形狀，然而要使這些路徑真正顯示在畫布上，必須進行描邊或填充操作。Canvas 的路徑繪製雖然靈活，但需要多個方法配合使用來創建一個完整的圖形。

常用路徑繪製方法

方法	功能
ctx.beginPath()	開始一個新的路徑實例。
ctx.closePath()	閉合當前路徑，若起點和終點不一致，會自動連接起始點和終點。
ctx.moveTo(x, y)	設置起始位置，將筆觸移動到指定的 x 和 y 座標。
ctx.lineTo(x, y)	從當前位置繪製一條直線到指定的 x 和 y 座標。

路徑繪製示例

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 開始新路徑
ctx.beginPath();
// 移動筆觸到 (50, 50) 的位置
ctx.moveTo(50, 50);
// 繪製一條從 (50, 50) 到 (200, 50) 的直線
ctx.lineTo(200, 50);
// 繪製一條從 (200, 50) 到 (200, 200) 的直線
ctx.lineTo(200, 200);
// 閉合路徑，會自動連接到起始點
ctx.closePath();
// 描邊繪製路徑
ctx.stroke();

多個路徑與 closePath() 議題

當我們在 Canvas 中繪製多個路徑時，每個路徑的處理方式會影響最終的結果。closePath() 的主要功能是閉合當前路徑，也就是說，它會自動將最後一個點連接到起點，形成封閉形狀。這在繪製封閉形狀（如多邊形）時非常實用。

如果你不希望路徑被閉合，可以選擇不使用 closePath()，這樣路徑將保持開放。

多個路徑示例

讓我們看看一個有兩個路徑的例子，其中第一個路徑使用了 closePath()，而第二個路徑則沒有使用。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');


// 第一個路徑 - 繪製封閉的三角形
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 50);
ctx.lineTo(125, 200);
ctx.closePath();  // 閉合路徑，連接起點和終點
ctx.stroke();

// 第二個路徑 - 繪製開放的折線
ctx.beginPath();
ctx.moveTo(250, 50);
ctx.lineTo(400, 50);
ctx.lineTo(325, 200);
// 不使用 closePath()，保持路徑開放
ctx.stroke();

結果解釋：

第一個路徑 使用了 closePath()，因此繪製出來的圖形是一個封閉的三角形。這是因為 closePath() 自動將路徑的最後一點連接到起點，形成完整的形狀。

第二個路徑 沒有使用 closePath()，因此它的結果是一個開放的折線，沒有將最後一點連接到起點。

如何管理多路徑：

每個路徑獨立處理： 使用 beginPath() 開始新的路徑，這樣不同路徑之間不會相互影響。這對於繪製多個獨立圖形很重要。 closePath() 的靈活使用： 只在需要封閉形狀時使用 closePath()。 對於開放式路徑，例如折線圖或箭頭等，避免使用 closePath() 以保持預期的效果。

結論：

closePath() 在封閉路徑中發揮了關鍵作用，但在某些情況下，你可能只需要開放路徑。掌握這些基本操作，你可以靈活控制圖形的繪製效果，從而更好地利用 Canvas 提供的豐富功能來構建各種圖形。