HTML Canvas - path2D() 方法

HTML Canvas 的path2D() 建構函式方法返回一個新建立的path2D 物件，其中包含路徑資料。

語法

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

Path2D(path, d);

引數

以下是此方法的引數列表：

序號	引數及說明
1	path 建立路徑引數副本的其他路徑。
2	d 給定的 SVG 路徑資料值，用於根據提供的描述建立路徑。

返回值

它返回一個新建立的path2D 物件，該物件可進一步用於輕鬆地在 Canvas 元素上繪製路徑。

示例 1

以下示例使用 HTML Canvas path2D() 方法在 Canvas 元素上新增矩形的描邊。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var path = new Path2D();
      path.rect(30, 20, 150, 100);
      context.stroke(path);
   </script>
</body>
</html>

輸出

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

示例 2

以下示例使用path2D() 建構函式方法在 Canvas 元素上繪製一個圓。

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

輸出

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

示例 3

以下示例使用path2D() 方法在畫布元素上繪製組合形狀。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="200" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      var path = new Path2D();
      path.rect(25, 25, 250, 150);
      context.stroke(path);
      let path1 = new Path2D();
      path1.moveTo(220, 60);
      path1.arc(100, 100, 30, 0, 2 * Math.PI);
      context.fill(path1);
      let path2 = new Path2D();
      path2.moveTo(220, 60);
      path2.arc(200, 100, 30, 0, 2 * Math.PI);
      context.fill(path2);
   </script>
</body>
</html>

輸出

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

html_canvas_paths.htm

列印頁面