Path2D
.addPath()
method of the Canvas 2D API adds one
Path2D
object to another
Path2D
对象。
void path.addPath(path [, transform]);
path
Path2D
path to add.
transform
可选
DOMMatrix
to be used as the transformation matrix for the path that is added. (Technically a
DOMMatrixInit
对象)。
This example adds one path to another.
<canvas id="canvas"></canvas>
First, we create two separate
Path2D
objects, each of which contains a rectangle made using the
rect()
method. We then create a matrix using
document.createElementNS()
and
createSVGMatrix()
. We then add the second path to the first using
addPath()
, also applying the matrix to move the second path to the right. Finally, we draw the first path (which now contains both rectangles) using
fill()
.
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 = document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGMatrix();
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 实时标准
The definition of 'Path2D.addPath()' in that specification. |
实时标准 | Initial defintion. |
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
addPath
|
Chrome Yes | Edge ≤79 | Firefox 34 | IE No | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android 34 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
完整支持
不支持
实验。期望将来行为有所改变。
Path2D