Path2D()

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

Path2D() 构造函数返回一个新的 Path2D 对象的实例,可以选择另一条路径作为参数(创建一个拷贝),或者选择 SVG path 数据构成的字符串。

语法

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

参数

path 可选
当调用另一个 Path2D 对象时,会创建一个 path 变量的拷贝。
d 可选
当调用 SVG path 数据构成的字符串时,会根据描述创建一个新的路径。

示例

创建和拷贝路径

这是一段简单的代码片段,创建和拷贝 Path2D 路径。

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

var path1 = new Path2D();
path1.rect(10, 10, 100,100);

var path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);

ctx.stroke(path2);

修改下面的代码并在线查看 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: 150px">
var path1 = new Path2D();
path1.rect(10, 10, 100,100);

var path2 = new Path2D(path1);
path2.moveTo(220, 60);
path2.arc(170, 60, 50, 0, 2 * Math.PI);

ctx.stroke(path2);</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);

使用 SVG 路径

这是一段简单的代码片段,使用 SVG path data 创建一个 Path2D 路径。路径将会移动到点 (M10 10) ,然后向右侧水平移动80个点 (h 80),然后向下80个点 (v 80),然后向左80个点(h -80),最后回到起始点(z)。

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

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);

修改下面的代码并在线查看 canvas 的变化:

Playable code2
<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">
var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
ctx.fill(p);</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()
Living Standard Initial definition.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? 31.0 (31.0) 未实现 ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? 31.0 (31.0) 未实现 ? ?

参见

  • Path2D, 这个构造函数属于此接口。
 

文档标签和贡献者

 此页面的贡献者: ice-i-snow
 最后编辑者: ice-i-snow,