1# Path2D
2
3>  **NOTE**
4>
5>  This component is supported since API version 6. Updates will be marked with a superscript to indicate their earliest API version.
6
7**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
8
9
10## addPath
11
12addPath(path: Object): void
13
14Adds a path to this path.
15
16**Parameters**
17
18| Name  | Type    | Description            |
19| ---- | ------ | -------------- |
20| path | Object | Path to be added to this path.|
21
22**Example**
23
24  ```html
25<!-- xxx.hml -->
26<div>
27    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
28</div>
29  ```
30
31  ```js
32// xxx.js
33export default {
34    onShow() {
35        const el = this.$refs.canvas;
36        const ctx = el.getContext('2d');
37        var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
38        var path2 = ctx.createPath2D();
39        path2.addPath(path1);
40        ctx.stroke(path2);
41    }
42}
43  ```
44
45  ![en-us_image_0000001173164873](figures/en-us_image_0000001173164873.png)
46
47## setTransform
48
49setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void
50
51Sets the path transformation matrix.
52
53**Parameters**
54
55| Name        | Type    | Description     |
56| ---------- | ------ | ------- |
57| scaleX     | number | Scale ratio of the x-axis.|
58| skewX      | number | Skew angle of the x-axis.|
59| skewY      | number | Skew angle of the y-axis.|
60| scaleY     | number | Scale ratio of the y-axis.|
61| translateX | number | Translation distance along the x-axis.|
62| translateY | number | Translation distance along the y-axis.|
63
64**Example**
65
66  ```html
67<!-- xxx.hml -->
68<div>
69    <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
70</div>
71  ```
72
73  ```js
74// xxx.js
75export default {
76    onShow() {
77        const el = this.$refs.canvas;
78        const ctx = el.getContext('2d');
79        var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
80        path.setTransform(0.8, 0, 0, 0.4, 0, 0);
81        ctx.stroke(path);
82    }
83}
84  ```
85
86  ![en-us_image_0000001127125208](figures/en-us_image_0000001127125208.png)
87
88
89## closePath
90
91closePath(): void
92
93Moves the current point of the path back to the start point of the path, and draws a straight line between the current point and the start point. If the shape has already been closed or has only one point, this method does nothing.
94
95**Example**
96
97  ```html
98<!-- xxx.hml -->
99<div>
100    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
101</div>
102  ```
103
104  ```js
105// xxx.js
106export default {
107    onShow() {
108        const el = this.$refs.canvas;
109        const ctx = el.getContext('2d');
110        var path = ctx.createPath2D();
111        path.moveTo(200, 100);
112        path.lineTo(300, 100);
113        path.lineTo(200, 200);
114        path.closePath();
115        ctx.stroke(path);
116    }
117}
118  ```
119
120  ![en-us_image_0000001127125202](figures/en-us_image_0000001127125202.png)
121
122
123## moveTo
124
125moveTo(x: number, y: number): void
126
127Moves the current coordinate point of the path to the target point, without drawing a line during the movement.
128
129**Parameters**
130
131| Parameter  | Type    | Description     |
132| ---- | ------ | ------- |
133| x    | number | X-coordinate of the target point.|
134| y    | number | Y-coordinate of the target point.|
135
136**Example**
137
138  ```html
139<!-- xxx.hml -->
140<div>
141    <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
142</div>
143  ```
144
145  ```js
146// xxx.js
147export default {
148    onShow() {
149        const el = this.$refs.canvas;
150        const ctx = el.getContext('2d');
151        var path = ctx.createPath2D();
152        path.moveTo(50, 100);
153        path.lineTo(250, 100);
154        path.lineTo(150, 200);
155        path.closePath();
156        ctx.stroke(path);
157    }
158}
159  ```
160
161  ![en-us_image_0000001173164869](figures/en-us_image_0000001173164869.png)
162
163
164## lineTo
165
166lineTo(x: number, y: number): void
167
168Draws a straight line from the current point to the target point.
169
170**Parameters**
171
172| Name  | Type    | Description     |
173| ---- | ------ | ------- |
174| x    | number | X-coordinate of the target point.|
175| y    | number | Y-coordinate of the target point.|
176
177**Example**
178
179  ```html
180<!-- xxx.hml -->
181<div>
182    <canvas ref="canvas" style="width: 400px; height: 450px; background-color: #ffff00;"></canvas>
183</div>
184  ```
185
186  ```js
187// xxx.js
188export default {
189    onShow() {
190        const el = this.$refs.canvas;
191        const ctx = el.getContext('2d');
192        var path = ctx.createPath2D();
193        path.moveTo(100, 100);
194        path.lineTo(100, 200);
195        path.lineTo(200, 200);
196        path.lineTo(200, 100);
197        path.closePath();
198        ctx.stroke(path);
199    }
200}
201  ```
202
203  ![en-us_image_0000001127285024](figures/en-us_image_0000001127285024.png)
204
205
206## bezierCurveTo
207
208bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void
209
210Draws a cubic bezier curve on the canvas.
211
212**Parameters**
213
214| Name  | Type    | Description            |
215| ---- | ------ | -------------- |
216| cp1x | number | X-coordinate of the first parameter of the bezier curve.|
217| cp1y | number | Y-coordinate of the first parameter of the bezier curve.|
218| cp2x | number | X-coordinate of the second parameter of the bezier curve.|
219| cp2y | number | Y-coordinate of the second parameter of the bezier curve.|
220| x    | number | X-coordinate of the end point on the bezier curve.   |
221| y    | number | Y-coordinate of the end point on the bezier curve.   |
222
223**Example**
224
225  ```html
226<!-- xxx.hml -->
227<div>
228    <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
229</div>
230  ```
231
232  ```js
233// xxx.js
234export default {
235    onShow() {
236        const el = this.$refs.canvas;
237        const ctx = el.getContext('2d');
238        var path = ctx.createPath2D();
239        path.moveTo(10, 10);
240        path.bezierCurveTo(20, 100, 200, 100, 200, 20);
241        ctx.stroke(path);
242    }
243}
244  ```
245
246  ![en-us_image_0000001173324783](figures/en-us_image_0000001173324783.png)
247
248
249## quadraticCurveTo
250
251quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
252
253Draws a quadratic curve on the canvas.
254
255**Parameters**
256
257| Name  | Type    | Description         |
258| ---- | ------ | ----------- |
259| cpx  | number | X-coordinate of the bezier curve parameter.|
260| cpy  | number | Y-coordinate of the bezier curve parameter.|
261| x    | number | X-coordinate of the end point on the bezier curve.|
262| y    | number | Y-coordinate of the end point on the bezier curve.|
263
264**Example**
265
266  ```html
267<!-- xxx.hml -->
268<div>
269    <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
270</div>
271  ```
272
273  ```js
274// xxx.js
275export default {
276    onShow() {
277        const el = this.$refs.canvas;
278        const ctx = el.getContext('2d');
279        var path = ctx.createPath2D();
280        path.moveTo(10, 10);
281        path.quadraticCurveTo(100, 100, 200, 20);
282        ctx.stroke(path);
283    }
284}
285  ```
286
287  ![en-us_image_0000001173164871](figures/en-us_image_0000001173164871.png)
288
289
290## arc
291
292arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number): void
293
294Draws an arc on the canvas.
295
296**Parameters**
297
298| Name           | Type     | Description        |
299| ------------- | ------- | ---------- |
300| x             | number  | X-coordinate of the center point of the arc.|
301| y             | number  | Y-coordinate of the center point of the arc.|
302| radius        | number  | Radius of the arc.   |
303| startAngle    | number  | Start radian of the arc.  |
304| endAngle      | number  | End radian of the arc.  |
305| anticlockwise | boolean | Whether to draw the arc counterclockwise.|
306
307**Example**
308
309  ```html
310<!-- xxx.hml -->
311<div>
312    <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
313</div>
314  ```
315
316  ```js
317// xxx.js
318export default {
319    onShow() {
320        const el = this.$refs.canvas;
321        const ctx = el.getContext('2d');
322        var path = ctx.createPath2D();
323        path.arc(100, 75, 50, 0, 6.28);
324        ctx.stroke(path);
325    }
326}
327  ```
328
329  ![en-us_image_0000001173164867](figures/en-us_image_0000001173164867.png)
330
331
332## arcTo
333
334arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
335
336Draws an arc based on the radius and points on the arc.
337
338**Parameters**
339
340| Parameter    | Type    | Description             |
341| ------ | ------ | --------------- |
342| x1     | number | X-coordinate of the first point on the arc.|
343| y1     | number | Y-coordinate of the first point on the arc.|
344| x2     | number | X-coordinate of the second point on the arc.|
345| y2     | number | Y-coordinate of the second point on the arc.|
346| radius | number | Radius of the arc.       |
347
348**Example**
349
350  ```html
351<!-- xxx.hml -->
352<div>
353    <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
354</div>
355  ```
356
357  ```js
358// xxx.js
359export default {
360    onShow() {
361        const el = this.$refs.canvas;
362        const ctx = el.getContext('2d');
363        var path = ctx.createPath2D();
364        path.arcTo(150, 20, 150, 70, 50);
365        ctx.stroke(path);
366    }
367}
368  ```
369
370  ![en-us_image_0000001127125204](figures/en-us_image_0000001127125204.png)
371
372
373## ellipse
374
375ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void
376
377Draws an ellipse in the specified rectangular region on the canvas.
378
379**Parameters**
380
381| Name           | Type    | Description                                  |
382| ------------- | ------ | ------------------------------------ |
383| x             | number | X-coordinate of the ellipse center.                          |
384| y             | number | Y-coordinate of the ellipse center.                          |
385| radiusX       | number | Ellipse radius on the x-axis.                          |
386| radiusY       | number | Ellipse radius on the y-axis.                          |
387| rotation      | number | Rotation angle of the ellipse, in radians.                      |
388| startAngle    | number | Angle of the start point for drawing the ellipse, in radians.                   |
389| endAngle      | number | Angle of the end point for drawing the ellipse, in radians.                   |
390| anticlockwise | number | Whether to draw the ellipse counterclockwise. The value **0** means clockwise, and **1** means counterclockwise. This parameter is optional. The default value is **0**.|
391
392**Example**
393
394  ```html
395<!-- xxx.hml -->
396<div>
397    <canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas>
398</div>
399  ```
400
401  ```js
402// xxx.js
403export default {
404    onShow() {
405        const el = this.$refs.canvas;
406        const ctx = el.getContext('2d');
407        var path = ctx.createPath2D();
408        path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
409        ctx.stroke(path);
410    }
411}
412  ```
413
414  ![en-us_image_0000001173324787](figures/en-us_image_0000001173324787.png)
415
416
417## rect
418
419rect(x: number, y: number, width: number, height: number): void
420
421Creates a rectangle on the canvas.
422
423**Parameters**
424
425| Name    | Type    | Description           |
426| ------ | ------ | ------------- |
427| x      | number | X-coordinate of the upper left corner of the rectangle.|
428| y      | number | Y-coordinate of the upper left corner of the rectangle.|
429| width  | number | Width of the rectangle.     |
430| height | number | Height of the rectangle.     |
431
432**Example**
433
434  ```html
435<!-- xxx.hml -->
436<div>
437    <canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas>
438</div>
439  ```
440
441  ```js
442// xxx.js
443export default {
444    onShow() {
445        const el = this.$refs.canvas;
446        const ctx = el.getContext('2d');
447        var path = ctx.createPath2D();
448        path.rect(20, 20, 100, 100);
449        ctx.stroke(path);
450    }
451}
452  ```
453
454  ![en-us_image_0000001127125212](figures/en-us_image_0000001127125212.png)
455