Path2D()
Experimental: 这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
Path2D()
构造函数返回一个新的 Path2D
对象的实例,可以选择另一条路径作为参数(创建一个拷贝),或者选择 SVG path 数据构成的字符串。
语法
new Path2D(); new Path2D(path); new Path2D(d);
参数
path
可选-
当调用另一个
Path2D
对象时,会创建一个path
变量的拷贝。 d
可选-
当调用 SVG path 数据构成的字符串时,会根据描述创建一个新的路径。
示例
创建和拷贝路径
这是一段简单的代码片段,创建和拷贝 Path2D
路径。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let path1 = new Path2D();
path1.rect(10, 10, 100, 100);
let path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);
ctx.stroke(path2);
使用 SVG 路径
这是一段简单的代码片段,使用 SVG path data 创建一个 Path2D
路径。路径将会移动到点 (M10 10
) ,然后向右侧水平移动 80 个点 (h 80
),然后向下 80 个点 (v 80
),然后向左 80 个点 (h -80
),最后回到起始点 (z
)。
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let p = new Path2D('M10 10 h 80 v 80 h -80 Z');
ctx.fill(p);
规范
Specification |
---|
HTML Standard # dom-path2d-dev |
浏览器兼容性
BCD tables only load in the browser
参见
Path2D
, 这个构造函数属于此接口。