HTML Canvas - addPath() 方法

HTML Canvas 的addPath() 方法是Path2D 介面的一部分，可用於將一個畫布路徑物件新增到另一個物件。

它只能用於Path2D 建構函式物件，不能應用於其他物件，因為它需要一個直接的路徑。它來自Path2D 介面。

語法

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

Path2D.addPath(current-path, transform);

引數

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

序號	引數及描述
1	當前路徑要新增的畫布元素中當前可用的路徑。
2	變換要應用於正在新增的路徑的變換。

返回值

僅在請求時，使用當前路徑生成的新的路徑才會顯示在 Canvas 元素上。

示例

以下示例使用 HTML Canvas addPath() 方法從現有路徑繪製一個圓圈，並在 Canvas 元素上顯示它。

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

輸出

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

示例

以下示例首先在 Canvas 元素上繪製一個矩形，並將路徑的一些資料複製到 Canvas 元素上，並對其應用變換。

<!DOCTYPE html>
<html lang="en">
   <head>
      <title<Reference API</title>
      <style>
         body {
            margin: 10px;
            padding: 10px;
         }
      </style>
   </head>
   <body>
      <canvas id="canvas" width="400" height="200" style="border: 1px solid black;"></canvas>
      <script>
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         var path1 = new Path2D();
         path1.rect(10, 10, 200, 150);
         var path2 = new Path2D();
         path2.rect(10, 10, 200, 75);
         let transform = new DOMMatrix();
         transform.a = 1;
         transform.b = 0;
         transform.c = 0;
         transform.d = 1;
         transform.e = 150;
         transform.f = 0;
         path1.addPath(path2, transform);
         context.fill(path1);
      </script>
   </body>
</html>

輸出

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

html_canvas_paths.htm

列印頁面