Path2D: addPath() 方法
注意：此功能在 Web Workers 中可用。
Canvas 2D API 的 Path2D.addPath() 方法将一个 Path2D 对象添加到另一个 Path2D 对象。
语法
js
addPath(path)
addPath(path, transform)
参数
路径-
要添加的
Path2D路径。 transform可选-
将用作所添加路径的变换矩阵的
DOMMatrix。（技术上讲，是指一个具有与DOMMatrix对象相同属性的对象。）
返回值
无（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 |
浏览器兼容性
加载中…
另见
- 定义此方法的接口：
Path2D