在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

这是 实验性技术
检查 浏览器兼容性表格 要小心谨慎在生产中使用这之前。

Path2D() constructor returns a newly instantiated Path2D object, optionally with another path as an argument (creates a copy), or optionally with a string consisting of SVG path 数据。

句法

new Path2D();
new Path2D(path);
new Path2D(d);
					

参数

path 可选

When invoked with another Path2D object, a copy of the path argument is created.

d 可选

When invoked with a string consisting of SVG path data, a new path is created from that description.

范例

Creating and copying paths

This example creates and copies a Path2D 路径。

<canvas id="canvas"></canvas>
					

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

Using SVG paths

此范例创建 Path2D path using SVG path data . The path will move to point ( M10 10 ) and then move horizontally 80 points to the right ( h 80 ), then 80 points down ( v 80 ), then 80 points to the left ( h -80 ), and then back to the start ( Z ).

<canvas id="canvas"></canvas>
					

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 实时标准 The definition of 'Path2D()' in that specification.	实时标准	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
Path2D	Chrome Yes	Edge ≤18	Firefox 31	IE ?	Opera Yes	Safari 10	WebView Android Yes	Chrome Android Yes	Firefox Android 31	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes
Path2D() 构造函数	Chrome Yes	Edge ≤18 注意事项 ≤18 注意事项 The constructor for Path2D objects in Edge does not support being invoked with a string consisting of SVG path data. See issue 8438884 了解细节。	Firefox 31	IE ?	Opera Yes	Safari 10	WebView Android 不支持 No	Chrome Android 42	Firefox Android 31	Opera Android Yes	Safari iOS Yes	Samsung Internet Android 4.0
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 , the interface this constructor belongs to

元数据

• 最后修改： 2019 年 3 月 23 日

相关话题

1. 画布 API
2. Path2D
3. 构造函数

   1. Path2D()
4. 方法

   1. addPath()
5. Related pages for Canvas API

   1. Canvas
   2. CanvasGradient
   3. CanvasImageSource
   4. CanvasPattern
   5. CanvasRenderingContext2D
   6. HTMLCanvasElement
   7. ImageBitmap
   8. ImageBitmapFactories
   9. ImageBitmapRenderingContext
   10. ImageData
   11. OffscreenCanvas
   12. RenderingContext
   13. TextMetrics