1# Path2D 2 3**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**. 4 5## addPath 6 7addPath(path: Object): void 8 9Adds a path to this path. 10 11- Parameters 12 13 14 15 | Name | Type | Description | 16 | ---- | ------ | ------------------------------ | 17 | path | Object | Path to be added to this path. | 18 19- Example 20 21 ``` 22 <!-- xxx.hml --> 23 <div> 24 <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> 25 </div> 26 ``` 27 28 ``` 29 //xxx.js 30 export default { 31 onShow() { 32 const el =this.$refs.canvas; 33 const ctx = el.getContext('2d'); 34 var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z"); 35 var path2 = ctx.createPath2D(); 36 path2.addPath(path1); 37 ctx.stroke(path2); 38 } 39 } 40 ``` 41 42  43 44## setTransform 45 46setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, translateX: number, translateY: number): void 47 48Sets the path transformation matrix. 49 50- Parameters 51 52 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 ``` 66 <!-- xxx.hml --> 67 <div> 68 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 69 </div> 70 ``` 71 72 ``` 73 //xxx.js 74 export 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## closePath 88 89closePath(): void 90 91Moves 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. 92 93- Example 94 95 ``` 96 <!-- xxx.hml --> 97 <div> 98 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 99 </div> 100 ``` 101 102 ``` 103 //xxx.js 104 export 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## moveTo 121 122moveTo(x: number, y: number): void 123 124Moves the current coordinate point of the path to the target point, without drawing a line during the movement. 125 126- Parameters 127 128 129 130 | Parameter | Type | Description | 131 | --------- | ------ | -------------------------------- | 132 | x | number | X-coordinate of the target point | 133 | y | number | Y-coordinate of the target point | 134 135- Example 136 137 ``` 138 <!-- xxx.hml --> 139 <div> 140 <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas> 141 </div> 142 ``` 143 144 ``` 145 //xxx.js 146 export default { 147 onShow() { 148 const el =this.$refs.canvas; 149 const ctx = el.getContext('2d'); 150 var path = ctx.createPath2D(); 151 path.moveTo(50, 100); 152 path.lineTo(250, 100); 153 path.lineTo(150, 200); 154 path.closePath(); 155 ctx.stroke(path); 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 171 172 | Parameter | 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 ``` 180 <!-- xxx.hml --> 181 <div> 182 <canvas ref="canvas" style="width: 400px; height: 450px; background-color: #ffff00;"></canvas> 183 </div> 184 ``` 185 186 ``` 187 //xxx.js 188 export 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  204 205## bezierCurveTo 206 207bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 208 209Draws a cubic bezier curve on the canvas. 210 211- Parameters 212 213 214 215 | Parameter | Type | Description | 216 | --------- | ------ | -------------------------------------------------------- | 217 | cp1x | number | X-coordinate of the first parameter of the bezier curve | 218 | cp1y | number | Y-coordinate of the first parameter of the bezier curve | 219 | cp2x | number | X-coordinate of the second parameter of the bezier curve | 220 | cp2y | number | Y-coordinate of the second parameter of the bezier curve | 221 | x | number | X-coordinate of the end point on the bezier curve | 222 | y | number | Y-coordinate of the end point on the bezier curve | 223 224- Example 225 226 ``` 227 <!-- xxx.hml --> 228 <div> 229 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 230 </div> 231 ``` 232 233 ``` 234 //xxx.js 235 export default { 236 onShow() { 237 const el =this.$refs.canvas; 238 const ctx = el.getContext('2d'); 239 var path = ctx.createPath2D(); 240 path.moveTo(10, 10); 241 path.bezierCurveTo(20, 100, 200, 100, 200, 20); 242 ctx.stroke(path); 243 } 244 } 245 ``` 246 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 258 259 | Parameter | Type | Description | 260 | --------- | ------ | ------------------------------------------------- | 261 | cpx | number | X-coordinate of the bezier curve parameter | 262 | cpy | number | Y-coordinate of the bezier curve parameter | 263 | x | number | X-coordinate of the end point on the bezier curve | 264 | y | number | Y-coordinate of the end point on the bezier curve | 265 266- Example 267 268 ``` 269 <!-- xxx.hml --> 270 <div> 271 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 272 </div> 273 ``` 274 275 ``` 276 //xxx.js 277 export default { 278 onShow() { 279 const el =this.$refs.canvas; 280 const ctx = el.getContext('2d'); 281 var path = ctx.createPath2D(); 282 path.moveTo(10, 10); 283 path.quadraticCurveTo(100, 100, 200, 20); 284 ctx.stroke(path); 285 } 286 } 287 ``` 288 289  290 291## arc 292 293arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise: number): void 294 295Draws an arc on the canvas. 296 297- Parameters 298 299 300 301 | Parameter | Type | Description | 302 | ------------- | ------- | ------------------------------------------- | 303 | x | number | X-coordinate of the center point of the arc | 304 | y | number | Y-coordinate of the center point of the arc | 305 | radius | number | Radius of the arc | 306 | startAngle | number | Start radian of the arc | 307 | endAngle | number | End radian of the arc | 308 | anticlockwise | boolean | Whether to draw the arc counterclockwise | 309 310- Example 311 312 ``` 313 <!-- xxx.hml --> 314 <div> 315 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 316 </div> 317 ``` 318 319 ``` 320 //xxx.js 321 export default { 322 onShow() { 323 const el =this.$refs.canvas; 324 const ctx = el.getContext('2d'); 325 var path = ctx.createPath2D(); 326 path.arc(100, 75, 50, 0, 6.28); 327 ctx.stroke(path); 328 } 329 } 330 ``` 331 332  333 334## arcTo 335 336arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 337 338Draws an arc based on the radius and points on the arc. 339 340- Parameters 341 342 343 344 | Parameter | Type | Description | 345 | --------- | ------ | ------------------------------------------- | 346 | x1 | number | X-coordinate of the first point on the arc | 347 | y1 | number | Y-coordinate of the first point on the arc | 348 | x2 | number | X-coordinate of the second point on the arc | 349 | y2 | number | Y-coordinate of the second point on the arc | 350 | radius | number | Radius of the arc | 351 352- Example 353 354 ``` 355 <!-- xxx.hml --> 356 <div> 357 <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> 358 </div> 359 ``` 360 361 ``` 362 //xxx.js 363 export default { 364 onShow() { 365 const el =this.$refs.canvas; 366 const ctx = el.getContext('2d'); 367 var path = ctx.createPath2D(); 368 path.arcTo(150, 20, 150, 70, 50); 369 ctx.stroke(path); 370 } 371 } 372 ``` 373 374  375 376## ellipse 377 378ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise: number): void 379 380Draws an ellipse in the specified rectangular region. 381 382- Parameters 383 384 385 386 | Parameter | Type | Description | 387 | ------------- | ------ | ------------------------------------------------------------ | 388 | x | number | X-coordinate of the ellipse center | 389 | y | number | Y-coordinate of the ellipse center | 390 | radiusX | number | Ellipse radius on the x-axis. | 391 | radiusY | number | Ellipse radius on the y-axis. | 392 | rotation | number | Rotation angle of the ellipse. The unit is radian. | 393 | startAngle | number | Angle of the start point for drawing the ellipse. The unit is radian. | 394 | endAngle | number | Angle of the end point for drawing the ellipse. The angle is represented by radians. | 395 | 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**. | 396 397- Example 398 399 ``` 400 <!-- xxx.hml --> 401 <div> 402 <canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas> 403 </div> 404 ``` 405 406 ``` 407 //xxx.js 408 export default { 409 onShow() { 410 const el =this.$refs.canvas; 411 const ctx =el.getContext('2d'); 412 var path = ctx.createPath2D(); 413 path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); 414 ctx.stroke(path); 415 } 416 } 417 ``` 418 419  420 421## rect 422 423rect(x: number, y: number, width: number, height: number): void 424 425Creates a rectangle. 426 427- Parameters 428 429 430 431 | Parameter | Type | Description | 432 | --------- | ------ | ------------------------------------------------------- | 433 | x | number | X-coordinate of the upper left corner of the rectangle. | 434 | y | number | Y-coordinate of the upper left corner of the rectangle. | 435 | width | number | Width of the rectangle. | 436 | height | number | Height of the rectangle. | 437 438- Example 439 440 ``` 441 <!-- xxx.hml --> 442 <div> 443 <canvas ref="canvas" style="width: 500px; height: 450px; background-color: #ffff00;"></canvas> 444 </div> 445 ``` 446 447 ``` 448 //xxx.js 449 export default { 450 onShow() { 451 const el =this.$refs.canvas; 452 const ctx = el.getContext('2d'); 453 var path = ctx.createPath2D(); 454 path.rect(20, 20, 100, 100); 455 ctx.stroke(path); 456 } 457 } 458 ``` 459 460 
