Path2D: Path2D() 构造函数

Baseline 已广泛支持

此功能已相当成熟,可在多种设备和浏览器版本上运行。自 ⁨2016 年 8 月⁩ 起,所有浏览器均已提供此功能。

注意:此功能在 Web Workers 中可用。

Path2D() 构造函数返回一个新实例化的 Path2D 对象,可以选择性地带另一个路径作为参数(创建副本),或者选择性地带一个包含 SVG 路径数据的字符串。

语法

js
new Path2D()
new Path2D(path)
new Path2D(d)

参数

path 可选

当使用另一个 Path2D 对象调用时,会创建 path 参数的副本。

d 可选

当使用包含 SVG 路径数据的字符串调用时,将根据该描述创建一个新路径。

示例

创建和复制路径

此示例创建并复制了一个 Path2D 路径。

js
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 路径数据创建了一个 Path2D 路径。该路径将移动到点 (M10 10),然后水平向右移动 80 个点 (h 80),然后向下移动 80 个点 (v 80),然后向左移动 80 个点 (h -80),然后返回起点 (Z)。

js
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);

规范

规范
HTML
# dom-path2d-dev

浏览器兼容性

另见

  • Path2D,此构造函数所属的接口