Path2D.addPath()

Path2D.addPath() 是 Canvas 2D API 根据指定路径变量添加路径的方法。

语法

void path.addPath(path [, transform]);

参数

path: 需要添加的 Path2D 路径。
transform 可选: SVGMatrix 作为新增路径的变换矩阵。

示例

使用 `addPath` 方法

这是一段使用 addPath 方法的简单的代码片段。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// Create a new path with a rect
var p1 = new Path2D();
p1.rect(0,0,100,100);

// Create another path with a rect
var p2 = new Path2D();
p2.rect(0,0,100,100);

// Create transformation matrix that moves vertically 300 points to the right
var m = document.createElementNS("https://www.w3.org/2000/svg", "svg").createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 300; m.f = 0;

// add the second path to the first path
p1.addPath(p2, m);

// Finally, fill the first path onto the canvas
ctx.fill(p1);

修改下面的代码并在线查看 canvas 的变化 (查看浏览器兼容性列表，确定你目前的浏览器是否支持这个方法)：

Playable code

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:220px;">
var p1 = new Path2D();
p1.rect(0,0,100,100);

var p2 = new Path2D();
p2.rect(0,0,100,100);

var m = document.createElementNS("https://www.w3.org/2000/svg", "svg").createSVGMatrix();
m.a = 1; m.b = 0;
m.c = 0; m.d = 1;
m.e = 300; m.f = 0;

p1.addPath(p2, m);
ctx.fill(p1);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener("click", function() {
  textarea.focus();
})

textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

规范描述

Specification	Status	Comment
WHATWG HTML Living Standard Path2D.addPath()	Living Standard	Initial defintion.

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	(Yes)	34 (34)	未实现	(Yes)	未实现

Feature	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Basic support	(Yes)	(Yes)	34.0 (34)	未实现	(Yes)	未实现

参见

接口定义， Path2D.

Path2D.addPath()

语法

参数

示例

使用 addPath 方法

Playable code

规范描述

浏览器兼容性

参见

文档标签和贡献者

使用 `addPath` 方法