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