Path2D
.addPath()
是 Canvas 2D API 根据指定路径变量添加路径的方法。
语法
void path.addPath(path [, transform]);
参数
示例
使用 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("http://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 的变化 (查看浏览器兼容性列表,确定你目前的浏览器是否支持这个方法):
规范描述
Specification | Status | Comment |
---|---|---|
HTML Living Standard Path2D.addPath() |
Living Standard | Initial defintion. |
浏览器兼容性
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 未实现 | 34 (34) | 未实现 | (Yes) | (Yes) |
Feature | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | 34.0 (34) | 未实现 | (Yes) | 未实现 |
参见
- 接口定义,
Path2D
.