HTML Canvas - closePath() 方法

HTML Canvas 的 closePath() 方法是 CanvasRenderingContext2D 介面的一個方法，它向當前點新增一條直線並關閉當前路徑。

如果路徑已經被使用者關閉，則此方法不執行任何操作。即使在 Canvas 元素上只有一個路徑可用，也不需要關閉該路徑。

語法

以下是 HTML Canvas closePath() 方法的語法：

CanvasRenderingContext2D.closePath();

引數

它不接受任何引數，每次只執行一個操作。

返回值

當上下文物件呼叫此方法時，如果路徑未完成，則透過新增一條直線來完成路徑。

示例

以下示例使用 HTML Canvas closePath() 方法關閉繪製到 Canvas 上的弧線。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="200" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.beginPath();
      context.arc(100, 50, 75, 0, 1 * Math.PI);
      context.closePath();
      context.stroke();
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出如下：

示例

以下程式繪製了兩個有兩個邊的三角形，並使用 closePath() 方法關閉其中一個。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="450" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      
      // 1st triangle
      context.beginPath();
      context.moveTo(100, 25);
      context.lineTo(25, 125);
      context.lineTo(175, 125);
      context.stroke();
      context.closePath();
      
      // 2nd triangle
      context.beginPath();
      context.moveTo(300, 25);
      context.lineTo(225, 125);
      context.lineTo(375, 125);
      context.closePath();
      context.stroke();
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出如下：

html_canvas_paths.htm

列印頁面