From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/api/path2d/addpath/index.html | 181 +++++++++++++++++++++ files/zh-cn/web/api/path2d/index.html | 131 +++++++++++++++ files/zh-cn/web/api/path2d/path2d/index.html | 224 ++++++++++++++++++++++++++ 3 files changed, 536 insertions(+) create mode 100644 files/zh-cn/web/api/path2d/addpath/index.html create mode 100644 files/zh-cn/web/api/path2d/index.html create mode 100644 files/zh-cn/web/api/path2d/path2d/index.html (limited to 'files/zh-cn/web/api/path2d') diff --git a/files/zh-cn/web/api/path2d/addpath/index.html b/files/zh-cn/web/api/path2d/addpath/index.html new file mode 100644 index 0000000000..a19a3ce8cf --- /dev/null +++ b/files/zh-cn/web/api/path2d/addpath/index.html @@ -0,0 +1,181 @@ +--- +title: Path2D.addPath() +slug: Web/API/Path2D/addPath +translation_of: Web/API/Path2D/addPath +--- +
{{APIRef("Canvas API")}}
+ +

Path2D.addPath() 是 Canvas 2D API 根据指定路径变量添加路径的方法。

+ +

语法

+ +
void path.addPath(path [, transform]);
+
+ +

参数

+ +
+
path
+
需要添加的 {{domxref("Path2D")}} 路径。
+
transform {{optional_inline}}
+
{{domxref("SVGMatrix")}} 作为新增路径的变换矩阵。
+
+ +

示例

+ +

使用 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 的变化 (查看浏览器兼容性列表,确定你目前的浏览器是否支持这个方法):

+ +
+
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:220px;">
+var p1 = new Path2D();
+p1.rect(0,0,100,100);
+
+var p2 = new Path2D();
+p2.rect(0,0,100,100);
+
+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;
+
+p1.addPath(p2, m);
+ctx.fill(p1);</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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 500) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-path2d-addpath", "Path2D.addPath()")}}{{Spec2('HTML WHATWG')}}Initial defintion.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatNo}}{{CompatGeckoDesktop(34)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidChrome for AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatGeckoMobile(34)}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/path2d/index.html b/files/zh-cn/web/api/path2d/index.html new file mode 100644 index 0000000000..b27962c96c --- /dev/null +++ b/files/zh-cn/web/api/path2d/index.html @@ -0,0 +1,131 @@ +--- +title: Path2D +slug: Web/API/Path2D +translation_of: Web/API/Path2D +--- +
{{APIRef("Canvas API")}} {{SeeCompatTable}}
+ +

Canvas 2D API 的接口 Path2D 用来声明路径,此路径稍后会被{{domxref("CanvasRenderingContext2D")}} 对象使用。CanvasRenderingContext2D 接口的 路径方法 也存在于 Path2D 这个接口中,允许你在 canvas 中根据需要创建可以保留并重用的路径。

+ +

构造函数

+ +
+
{{domxref("Path2D.Path2D", "Path2D()")}}
+
Path2D 构造函数。 创建一个新的 Path2D 对象。
+
+ +

方法

+ +
+
{{domxref("Path2D.addPath()")}}
+
添加一条新路径到对当前路径。
+
{{domxref("CanvasRenderingContext2D.closePath", "Path2D.closePath()")}}
+
使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点,那么此函数不会做任何操作。
+
{{domxref("CanvasRenderingContext2D.moveTo()", "Path2D.moveTo()")}}
+
将一个新的子路径的起始点移动到(x,y)坐标。
+
{{domxref("CanvasRenderingContext2D.lineTo()", "Path2D.lineTo()")}}
+
使用直线连接子路径的终点到 x, y  坐标。
+
{{domxref("CanvasRenderingContext2D.bezierCurveTo()", "Path2D.bezierCurveTo()")}}
+
添加一条三次贝赛尔曲线到当前路径。 该方法需要三个点。 第一、第二个点是控制点,第三个点是结束点。起始点是当前路径的最后一个点,绘制贝赛尔曲线前,可以通过调用 moveTo() 进行修改。
+
{{domxref("CanvasRenderingContext2D.quadraticCurveTo()", "Path2D.quadraticCurveTo()")}}
+
添加一条二次贝赛尔曲线到当前路径。 
+
{{domxref("CanvasRenderingContext2D.arc()", "Path2D.arc()")}}
+
添加一条圆弧路径。 圆弧路径的圆心在 (x, y) 位置,半径为 r ,根据anticlockwise (默认为顺时针)指定的方向从 startAngle 开始绘制,到 endAngle 结束。
+
{{domxref("CanvasRenderingContext2D.arcTo()", "Path2D.arcTo()")}}
+
根据控制点和半径添加一条圆弧路径,使用直线连接前一个点。
+
{{domxref("CanvasRenderingContext2D.ellipse()", "Path2D.ellipse()")}}
+
添加一条椭圆路径。椭圆的圆心在(x,y)位置,半径分别是radiusX 和 radiusY ,按照anticlockwise (默认顺时针)指定的方向,从 startAngle  开始绘制,到 endAngle 结束。
+
{{domxref("CanvasRenderingContext2D.rect()", "Path2D.rect()")}}
+
创建一条矩形路径,矩形的起点位置是 (x, y) ,尺寸为 width 和 height
+
+ +

规范描述

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', "scripting.html#dom-path2d", "Path2D")}}{{Spec2('HTML WHATWG')}} 
+ +

浏览器兼容性

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop("31")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
{{domxref("Path2D.addPath()")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("34")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoMobile("31")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
{{domxref("Path2D.addPath()")}}{{CompatVersionUnknown}}{{CompatGeckoMobile("34")}}{{CompatNo}}{{CompatVersionUnknown}}{{CompatNo}}
+
+ +

参见

+ + diff --git a/files/zh-cn/web/api/path2d/path2d/index.html b/files/zh-cn/web/api/path2d/path2d/index.html new file mode 100644 index 0000000000..f606aa678d --- /dev/null +++ b/files/zh-cn/web/api/path2d/path2d/index.html @@ -0,0 +1,224 @@ +--- +title: Path2D() +slug: Web/API/Path2D/Path2D +translation_of: Web/API/Path2D/Path2D +--- +
{{APIRef("Canvas API")}}{{seeCompatTable}}
+ +

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

+ +

语法

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

参数

+ +
+
path {{optional_inline}}
+
当调用另一个 Path2D 对象时,会创建一个 path 变量的拷贝。
+
d {{optional_inline}}
+
当调用 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);
+
+
+ +

{{ EmbedLiveSample('Playable_code', 700, 420) }}

+ +

使用 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);
+
+
+ +

{{ EmbedLiveSample('Playable_code2', 700, 360) }}

+ +

规范描述

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'scripting.html#dom-path2d', 'Path2D()')}}{{Spec2('HTML WHATWG')}}Initial definition.
+ +

浏览器兼容性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("31.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("31.0")}}{{CompatNo}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

参见

+ + + +
 
-- cgit v1.2.3-54-g00ecf