Path2D：addPath() 方法
注意：此功能在Web Workers中可用。
Canvas 2D API 的Path2D.addPath()方法将一个Path2D对象添加到另一个Path2D对象中。
语法
js
addPath(path)
addPath(path, transform)
参数
返回值
无（undefined）。
示例
将路径添加到现有路径
此示例将一个路径添加到另一个路径。
HTML
html
<canvas id="canvas"></canvas>
JavaScript
首先，我们创建两个独立的Path2D对象，每个对象都包含使用rect()方法创建的矩形。然后，我们使用DOMMatrix()创建矩阵。然后，我们使用addPath()将第二个路径添加到第一个路径，并应用矩阵将第二个路径向右移动。最后，我们使用fill()绘制第一个路径（现在包含两个矩形）。
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Create first path and add a rectangle
let p1 = new Path2D();
p1.rect(0, 0, 100, 150);
// Create second path and add a rectangle
let p2 = new Path2D();
p2.rect(0, 0, 100, 75);
// Create transformation matrix that moves 200 points to the right
let m = new DOMMatrix();
m.a = 1;
m.b = 0;
m.c = 0;
m.d = 1;
m.e = 200;
m.f = 0;
// Add second path to the first path
p1.addPath(p2, m);
// Draw the first path
ctx.fill(p1);
结果
规范
| 规范 |
|---|
| HTML 标准 # dom-path2d-addpath-dev |
浏览器兼容性
BCD 表格仅在启用 JavaScript 的浏览器中加载。
另请参阅
- 定义此方法的接口：
Path2D