HTML Canvas - beginPath() 方法

HTML Canvas 的beginPath() 方法是CanvasRenderingContext2D 介面的一個方法，它在 Canvas 元素中建立一個空路徑來繪製形狀。

只有當 Canvas 上下文中需要新路徑時才呼叫此方法。如果要繪製的路徑有多個，則必須使用相同數量的beginPath() 方法。

語法

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

CanvasRenderingContext2D.beginPath();

引數

它不接受任何引數，因為它只是一個返回方法，只執行建立空路徑的單一任務。

返回值

它建立一個空路徑，可用於在 Canvas 元素內繪製各種形狀。它不直接返回任何內容，而是提供一個路徑。

示例

在下面的示例中，我們使用 HTML Canvas beginPath() 方法建立一個空路徑，並在其上繪製簡單的線條。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="250" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.beginPath();
         context.moveTo(150, 50);
         context.lineTo(150, 120);
         context.lineTo(50, 190);
         context.stroke();
      </script>
   </body>
</html>

輸出

以下程式碼在網頁上返回的輸出為：

示例

下面的例子使用線條在 Canvas 元素內繪製一個直角三角形，之前使用 beginPath() 方法建立了路徑。

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

輸出

以上程式碼在網頁上返回的輸出為：

html_canvas_paths.htm

列印頁面