1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: Path2D
slug: Web/API/Path2D
translation_of: Web/API/Path2D
---
<div>{{APIRef("Canvas API")}} {{SeeCompatTable}}</div>
<p>Canvas 2D API 的接口 <strong><code>Path2D</code></strong> 用来声明路径，此路径稍后会被{{domxref("CanvasRenderingContext2D")}} 对象使用。<code style="font-style: normal;">CanvasRenderingContext2D</code> 接口的 <a href="/en-US/docs/Web/API/CanvasRenderingContext2D#Paths">路径方法</a> 也存在于 Path2D 这个接口中，允许你在 canvas 中根据需要创建可以保留并重用的路径。</p>
<h2 id="构造函数">构造函数</h2>
<dl>
<dt>{{domxref("Path2D.Path2D", "Path2D()")}}</dt>
<dd><code>Path2D</code> 构造函数。 创建一个新的 <code>Path2D</code> 对象。</dd>
</dl>
<h2 id="方法">方法</h2>
<dl>
<dt>{{domxref("Path2D.addPath()")}}</dt>
<dd>添加一条新路径到对当前路径。</dd>
<dt>{{domxref("CanvasRenderingContext2D.closePath", "Path2D.closePath()")}}</dt>
<dd>使笔点返回到当前子路径的起始点。它尝试从当前点到起始点绘制一条直线。 如果图形已经是封闭的或者只有一个点，那么此函数不会做任何操作。</dd>
<dt>{{domxref("CanvasRenderingContext2D.moveTo()", "Path2D.moveTo()")}}</dt>
<dd>将一个新的子路径的起始点移动到(x，y)坐标。</dd>
<dt>{{domxref("CanvasRenderingContext2D.lineTo()", "Path2D.lineTo()")}}</dt>
<dd>使用直线连接子路径的终点到 <code style="font-style: normal;">x, y</code> 坐标。</dd>
<dt>{{domxref("CanvasRenderingContext2D.bezierCurveTo()", "Path2D.bezierCurveTo()")}}</dt>
<dd>添加一条三次贝赛尔曲线到当前路径。 该方法需要三个点。 第一、第二个点是控制点，第三个点是结束点。起始点是当前路径的最后一个点，绘制贝赛尔曲线前，可以通过调用 <code style="font-style: normal;">moveTo()</code> 进行修改。</dd>
<dt>{{domxref("CanvasRenderingContext2D.quadraticCurveTo()", "Path2D.quadraticCurveTo()")}}</dt>
<dd>添加一条二次贝赛尔曲线到当前路径。 </dd>
<dt>{{domxref("CanvasRenderingContext2D.arc()", "Path2D.arc()")}}</dt>
<dd>添加一条圆弧路径。 圆弧路径的圆心在 <em>(x, y)</em> 位置，半径为<em> r</em> ，根据<em>anticlockwise</em> （默认为顺时针）指定的方向从 <em>startAngle</em> 开始绘制，到 <em>endAngle</em> 结束。</dd>
<dt>{{domxref("CanvasRenderingContext2D.arcTo()", "Path2D.arcTo()")}}</dt>
<dd>根据控制点和半径添加一条圆弧路径，使用直线连接前一个点。</dd>
<dt>{{domxref("CanvasRenderingContext2D.ellipse()", "Path2D.ellipse()")}}</dt>
<dd>添加一条椭圆路径。椭圆的圆心在（x,y）位置，半径分别是<em>radiusX</em> 和 <em>radiusY</em> ，按照<em>anticlockwise</em> （默认顺时针）指定的方向，从 <em>startAngle </em> 开始绘制，到 <em>endAngle</em> 结束。</dd>
<dt>{{domxref("CanvasRenderingContext2D.rect()", "Path2D.rect()")}}</dt>
<dd>创建一条矩形路径，矩形的起点位置是 <em>(x, y) </em>，尺寸为 <em>width</em> 和 <em>height</em>。</dd>
</dl>
<h2 id="Specifications" name="Specifications">规范描述</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', "scripting.html#dom-path2d", "Path2D")}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("31")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>{{domxref("Path2D.addPath()")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("34")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("31")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
<tr>
<td>{{domxref("Path2D.addPath()")}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoMobile("34")}}</td>
<td>{{CompatNo}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="参见">参见</h2>
<ul>
<li>{{domxref("CanvasRenderingContext2D")}}</li>
</ul>
|
