1# Path2D 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @sd-wu--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口或者fill接口进行绘制。 10 11> **说明：** 12> 13> 从 API version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> Path2D对象不支持重置已设置的路径，如需新路径可重新创建一个空的Path2D对象。 16> 17> Path2D对象的方法无法对[CanvasRenderingContext2D](./ts-canvasrenderingcontext2d.md)和[OffscreenCanvasRenderingContext2D](./ts-offscreencanvasrenderingcontext2d.md)对象中设置的路径生效。 18 19## 构造函数 20 21### constructor 22 23constructor() 24 25构造一个空的Path2D对象。 26 27**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 28 29**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 30 31**系统能力：** SystemCapability.ArkUI.ArkUI.Full 32 33### constructor<sup>12+</sup> 34 35constructor(unit: LengthMetricsUnit) 36 37构造一个空的Path2D对象，支持配置Path2D对象的单位模式。 38 39**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 40 41**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 42 43**系统能力：** SystemCapability.ArkUI.ArkUI.Full 44 45**参数：** 46 47| 参数名 | 类型 | 必填 | 说明 | 48| ----- | -------- | ---- | ---------- | 49| unit | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 是 | 用来配置Path2D对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)。<br>默认值：DEFAULT| 50 51### constructor 52 53constructor(path: Path2D) 54 55使用路径对象构造Path2D对象。 56 57**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 58 59**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 60 61**系统能力：** SystemCapability.ArkUI.ArkUI.Full 62 63**参数：** 64 65| 参数名 | 类型 | 必填 | 说明 | 66| ----- | -------- | ---- | ---------- | 67| path | Path2D | 是 | 路径对象。 | 68 69### constructor<sup>12+</sup> 70 71constructor(path: Path2D, unit: LengthMetricsUnit) 72 73使用路径对象构造Path2D对象，支持配置Path2D对象的单位模式。 74 75**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 76 77**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 78 79**系统能力：** SystemCapability.ArkUI.ArkUI.Full 80 81**参数：** 82 83| 参数名 | 类型 | 必填 | 说明 | 84| ----- | -------- | ---- | ---------- | 85| path | Path2D | 是 | 路径对象。 | 86| unit | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 是 | 用来配置Path2D对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)。<br>默认值：DEFAULT| 87 88### constructor 89 90constructor(d: string) 91 92使用符合SVG路径描述规范的路径字符串构造Path2D对象。 93 94**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 95 96**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 97 98**系统能力：** SystemCapability.ArkUI.ArkUI.Full 99 100**参数：** 101 102| 参数名 | 类型 | 必填 | 说明 | 103| ----- | -------- | ---- | ---------- | 104| d | string | 是 | 符合SVG路径描述规范的路径字符串，格式参考[SVG路径描述规范](ts-drawing-components-path.md#svg路径描述规范)。 | 105 106### constructor<sup>12+</sup> 107 108constructor(description: string, unit: LengthMetricsUnit) 109 110使用符合SVG路径描述规范的路径字符串构造Path2D对象，支持配置Path2D对象的单位模式。 111 112**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 113 114**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 115 116**系统能力：** SystemCapability.ArkUI.ArkUI.Full 117 118**参数：** 119 120| 参数名 | 类型 | 必填 | 说明 | 121| ----- | -------- | ---- | ---------- | 122| description | string | 是 | 符合SVG路径描述规范的路径字符串，格式参考[SVG路径描述规范](ts-drawing-components-path.md#svg路径描述规范)。 | 123| unit | [LengthMetricsUnit](../js-apis-arkui-graphics.md#lengthmetricsunit12) | 是 | 用来配置Path2D对象的单位模式，配置后无法动态更改，配置方法同[CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md)。<br>默认值：DEFAULT| 124 125## 方法 126 127### addPath 128 129addPath(path: Path2D, transform?: Matrix2D): void 130 131将另一个路径添加到当前的路径对象中。 132 133**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 134 135**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 136 137**系统能力：** SystemCapability.ArkUI.ArkUI.Full 138 139**参数：** 140 141| 参数名 | 类型 | 必填 | 说明 | 142| ----- | -------- | ---- | ---------- | 143| path | Path2D | 是 | 需要添加到当前路径的路径对象，路径单位：px。 | 144| transform | [Matrix2D](ts-components-canvas-matrix2d.md) | 否 | 新增路径的变换矩阵对象。<br>默认值：null | 145 146 147**示例：** 148 149 ```ts 150 // xxx.ets 151 @Entry 152 @Component 153 struct AddPath { 154 private settings: RenderingContextSettings = new RenderingContextSettings(true); 155 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 156 private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z"); 157 private path2Db: Path2D = new Path2D(); 158 159 build() { 160 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 161 Canvas(this.context) 162 .width('100%') 163 .height('100%') 164 .backgroundColor('#ffff00') 165 .onReady(() => { 166 this.path2Db.addPath(this.path2Da) 167 this.context.stroke(this.path2Db) 168 }) 169 } 170 .width('100%') 171 .height('100%') 172 } 173 } 174 ``` 175 176  177 178 179### closePath 180 181closePath(): void 182 183将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。 184 185**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 186 187**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 188 189**系统能力：** SystemCapability.ArkUI.ArkUI.Full 190 191**示例：** 192 193 ```ts 194 // xxx.ets 195 @Entry 196 @Component 197 struct ClosePath { 198 private settings: RenderingContextSettings = new RenderingContextSettings(true); 199 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 200 private path2Db: Path2D = new Path2D(); 201 202 build() { 203 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 204 Canvas(this.context) 205 .width('100%') 206 .height('100%') 207 .backgroundColor('#ffff00') 208 .onReady(() => { 209 this.path2Db.moveTo(200, 100) 210 this.path2Db.lineTo(300, 100) 211 this.path2Db.lineTo(200, 200) 212 this.path2Db.closePath() 213 this.context.stroke(this.path2Db) 214 }) 215 } 216 .width('100%') 217 .height('100%') 218 } 219 } 220 ``` 221 222  223 224 225### moveTo 226 227moveTo(x: number, y: number): void 228 229将路径的当前坐标点移动到目标点，移动过程中不绘制线条。 230 231**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 232 233**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 234 235**系统能力：** SystemCapability.ArkUI.ArkUI.Full 236 237**参数：** 238 239| 参数 | 类型 | 必填 | 描述 | 240| ---- | ------ | ---- | -------- | 241| x | number | 是 | 目标点X轴坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 242| y | number | 是 | 目标点Y轴坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 243 244> **说明：** 245> 246> API version 18之前，若未执行moveTo接口或moveTo接口传入无效参数，路径以(0,0)为起点。 247> 248> API version 18及以后，若未执行moveTo接口或moveTo接口传入无效参数，路径以初次调用的lineTo、arcTo、bezierCurveTo或quadraticCurveTo接口中的起始点为起点。 249 250**示例：** 251 252 ```ts 253 // xxx.ets 254 @Entry 255 @Component 256 struct MoveTo { 257 private settings: RenderingContextSettings = new RenderingContextSettings(true); 258 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 259 private path2Db: Path2D = new Path2D(); 260 261 build() { 262 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 263 Canvas(this.context) 264 .width('100%') 265 .height('100%') 266 .backgroundColor('#ffff00') 267 .onReady(() => { 268 this.path2Db.moveTo(50, 100) 269 this.path2Db.lineTo(250, 100) 270 this.path2Db.lineTo(150, 200) 271 this.path2Db.closePath() 272 this.context.stroke(this.path2Db) 273 }) 274 } 275 .width('100%') 276 .height('100%') 277 } 278 } 279 ``` 280 281  282 283 284### lineTo 285 286lineTo(x: number, y: number): void 287 288从当前点绘制一条直线到目标点。 289 290**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 291 292**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 293 294**系统能力：** SystemCapability.ArkUI.ArkUI.Full 295 296**参数：** 297 298| 参数名 | 类型 | 必填 | 说明 | 299| ----- | -------- | ---- | ---------- | 300| x | number | 是 | 目标点X轴坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 301| y | number | 是 | 目标点Y轴坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 302 303**示例：** 304 305 ```ts 306 // xxx.ets 307 @Entry 308 @Component 309 struct LineTo { 310 private settings: RenderingContextSettings = new RenderingContextSettings(true); 311 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 312 private path2Db: Path2D = new Path2D(); 313 314 build() { 315 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 316 Canvas(this.context) 317 .width('100%') 318 .height('100%') 319 .backgroundColor('#ffff00') 320 .onReady(() => { 321 this.path2Db.moveTo(100, 100) 322 this.path2Db.lineTo(100, 200) 323 this.path2Db.lineTo(200, 200) 324 this.path2Db.lineTo(200, 100) 325 this.path2Db.closePath() 326 this.context.stroke(this.path2Db) 327 }) 328 } 329 .width('100%') 330 .height('100%') 331 } 332 } 333 ``` 334 335  336 337 338### bezierCurveTo 339 340bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number, y: number): void 341 342创建三次贝塞尔曲线的路径。 343 344**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 345 346**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 347 348**系统能力：** SystemCapability.ArkUI.ArkUI.Full 349 350**参数：** 351 352| 参数名 | 类型 | 必填 | 说明 | 353| ----- | -------- | ---- | ---------- | 354| cp1x | number | 是 | 第一个贝塞尔参数的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 355| cp1y | number | 是 | 第一个贝塞尔参数的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 356| cp2x | number | 是 | 第二个贝塞尔参数的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 357| cp2y | number | 是 | 第二个贝塞尔参数的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 358| x | number | 是 | 路径结束时的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 359| y | number | 是 | 路径结束时的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 360 361**示例：** 362 363 ```ts 364 // xxx.ets 365 @Entry 366 @Component 367 struct BezierCurveTo { 368 private settings: RenderingContextSettings = new RenderingContextSettings(true); 369 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 370 private path2Db: Path2D = new Path2D(); 371 372 build() { 373 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 374 Canvas(this.context) 375 .width('100%') 376 .height('100%') 377 .backgroundColor('#ffff00') 378 .onReady(() => { 379 this.path2Db.moveTo(10, 10) 380 this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20) 381 this.context.stroke(this.path2Db) 382 }) 383 } 384 .width('100%') 385 .height('100%') 386 } 387 } 388 ``` 389 390  391 392 393### quadraticCurveTo 394 395quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void 396 397创建二次贝塞尔曲线的路径。 398 399**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 400 401**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 402 403**系统能力：** SystemCapability.ArkUI.ArkUI.Full 404 405**参数：** 406 407| 参数名 | 类型 | 必填 | 说明 | 408| ----- | -------- | ---- | ---------- | 409| cpx | number | 是 | 贝塞尔参数的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 410| cpy | number | 是 | 贝塞尔参数的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 411| x | number | 是 | 路径结束时的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 412| y | number | 是 | 路径结束时的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 413 414**示例：** 415 416 ```ts 417 // xxx.ets 418 @Entry 419 @Component 420 struct QuadraticCurveTo { 421 private settings: RenderingContextSettings = new RenderingContextSettings(true); 422 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 423 private path2Db: Path2D = new Path2D(); 424 425 build() { 426 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 427 Canvas(this.context) 428 .width('100%') 429 .height('100%') 430 .backgroundColor('#ffff00') 431 .onReady(() => { 432 this.path2Db.moveTo(10, 10) 433 this.path2Db.quadraticCurveTo(100, 100, 200, 20) 434 this.context.stroke(this.path2Db) 435 }) 436 } 437 .width('100%') 438 .height('100%') 439 } 440 } 441 ``` 442 443  444 445 446### arc 447 448arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 449 450绘制弧线路径。 451 452**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 453 454**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 455 456**系统能力：** SystemCapability.ArkUI.ArkUI.Full 457 458**参数：** 459 460| 参数名 | 类型 | 必填 | 说明 | 461| ----- | -------- | ---- | ---------- | 462| x | number | 是 | 弧线圆心的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 463| y | number | 是 | 弧线圆心的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 464| radius | number | 是 | 弧线的圆半径。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 465| startAngle | number | 是 | 弧线的起始弧度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>单位：弧度。 | 466| endAngle | number | 是 | 弧线的终止弧度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>单位：弧度。 | 467| counterclockwise | boolean | 否 | 是否逆时针绘制圆弧。<br>true：逆时针方向绘制圆弧。<br>false：顺时针方向绘制圆弧。<br>默认值：false，设置null或undefined按默认值处理。 | 468 469**示例：** 470 471 ```ts 472 // xxx.ets 473 @Entry 474 @Component 475 struct Arc { 476 private settings: RenderingContextSettings = new RenderingContextSettings(true); 477 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 478 private path2Db: Path2D = new Path2D(); 479 480 build() { 481 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 482 Canvas(this.context) 483 .width('100%') 484 .height('100%') 485 .backgroundColor('#ffff00') 486 .onReady(() => { 487 this.path2Db.arc(100, 75, 50, 0, 6.28) 488 this.context.stroke(this.path2Db) 489 }) 490 } 491 .width('100%') 492 .height('100%') 493 } 494 } 495 ``` 496 497  498 499 500### arcTo 501 502arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void 503 504依据圆弧经过的点和圆弧半径创建圆弧路径。 505 506**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 507 508**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 509 510**系统能力：** SystemCapability.ArkUI.ArkUI.Full 511 512**参数：** 513 514| 参数名 | 类型 | 必填 | 说明 | 515| ----- | -------- | ---- | ---------- | 516| x1 | number | 是 | 圆弧经过的第一个点的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 517| y1 | number | 是 | 圆弧经过的第一个点的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 518| x2 | number | 是 | 圆弧经过的第二个点的x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 519| y2 | number | 是 | 圆弧经过的第二个点的y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 520| radius | number | 是 | 圆弧的圆半径值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 521 522**示例：** 523 524 ```ts 525 // xxx.ets 526 @Entry 527 @Component 528 struct ArcTo { 529 private settings: RenderingContextSettings = new RenderingContextSettings(true); 530 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 531 private path2Db: Path2D = new Path2D(); 532 533 build() { 534 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 535 Canvas(this.context) 536 .width('100%') 537 .height('100%') 538 .backgroundColor('#ffff00') 539 .onReady(() => { 540 this.path2Db.moveTo(0, 0) 541 this.path2Db.arcTo(150, 20, 150, 70, 50) 542 this.context.stroke(this.path2Db) 543 }) 544 } 545 .width('100%') 546 .height('100%') 547 } 548 } 549 ``` 550 551  552 553 554### ellipse 555 556ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void 557 558在规定的矩形区域绘制一个椭圆。 559 560**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 561 562**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 563 564**系统能力：** SystemCapability.ArkUI.ArkUI.Full 565 566**参数：** 567 568| 参数名 | 类型 | 必填 | 说明 | 569| ----- | -------- | ---- | ---------- | 570| x | number | 是 | 椭圆圆心的x轴坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp| 571| y | number | 是 | 椭圆圆心的y轴坐标。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp| 572| radiusX | number | 是 | 椭圆x轴的半径长度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp| 573| radiusY | number | 是 | 椭圆y轴的半径长度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp| 574| rotation | number | 是 | 椭圆的旋转角度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>单位：弧度 | 575| startAngle | number | 是 | 椭圆绘制的起始点角度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>单位：弧度 | 576| endAngle | number | 是 | 椭圆绘制的结束点角度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>单位：弧度 | 577| counterclockwise | boolean | 否 | 是否以逆时针方向绘制椭圆。<br>true：逆时针方向绘制椭圆。<br>false：顺时针方向绘制椭圆。<br>默认值：false，设置null或undefined按默认值处理。 | 578 579**示例：** 580 581 ```ts 582 // xxx.ets 583 @Entry 584 @Component 585 struct CanvasExample { 586 private settings: RenderingContextSettings = new RenderingContextSettings(true); 587 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 588 private path2Db: Path2D = new Path2D(); 589 590 build() { 591 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 592 Canvas(this.context) 593 .width('100%') 594 .height('100%') 595 .backgroundColor('#ffff00') 596 .onReady(() => { 597 this.path2Db.ellipse(200, 200, 50, 100, 0, Math.PI * 1, Math.PI * 2) 598 this.context.stroke(this.path2Db) 599 }) 600 } 601 .width('100%') 602 .height('100%') 603 } 604 } 605 ``` 606 607  608 609 610### rect 611 612rect(x: number, y: number, w: number, h: number): void 613 614创建矩形路径。 615 616**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 617 618**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 619 620**系统能力：** SystemCapability.ArkUI.ArkUI.Full 621 622**参数：** 623 624| 参数名 | 类型 | 必填 | 说明 | 625| ----- | -------- | ---- | ---------- | 626| x | number | 是 | 指定矩形的左上角x坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 627| y | number | 是 | 指定矩形的左上角y坐标值。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 628| w | number | 是 | 指定矩形的宽度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 629| h | number | 是 | 指定矩形的高度。<br>API version 18之前，设置NaN或Infinity时，整条路径不显示；设置null或undefined时，当前接口不生效。API version 18及以后，设置NaN、Infinity、null或undefined时当前接口不生效，其他传入有效参数的路径方法正常绘制。<br>默认单位：vp | 630 631**示例：** 632 633 ```ts 634 // xxx.ets 635 @Entry 636 @Component 637 struct CanvasExample { 638 private settings: RenderingContextSettings = new RenderingContextSettings(true); 639 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 640 private path2Db: Path2D = new Path2D(); 641 642 build() { 643 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 644 Canvas(this.context) 645 .width('100%') 646 .height('100%') 647 .backgroundColor('#ffff00') 648 .onReady(() => { 649 this.path2Db.rect(20, 20, 100, 100); 650 this.context.stroke(this.path2Db) 651 }) 652 } 653 .width('100%') 654 .height('100%') 655 } 656 } 657 ``` 658 659  660 661### roundRect<sup>20+</sup> 662 663roundRect(x: number, y: number, w: number, h: number, radii?: number | Array\<number>): void 664 665创建圆角矩形路径，此方法不会直接渲染内容，如需将圆角矩形绘制到画布上，可以使用fill或stroke方法。 666 667**卡片能力：** 从API version 20开始，该接口支持在ArkTS卡片中使用。 668 669**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 670 671**系统能力：** SystemCapability.ArkUI.ArkUI.Full 672 673**参数：** 674 675| 参数名 | 类型 | 必填 | 说明 | 676| ---- | ------ | ---- | ------------- | 677| x | number | 是 | 指定矩形的左上角x坐标值。<br>null按0处理，undefined按无效值处理，不进行绘制。<br>如需绘制完整矩形，取值范围：[0, Canvas宽度)。<br>默认单位：vp | 678| y | number | 是 | 指定矩形的左上角y坐标值。<br>null按0处理，undefined按无效值处理，不进行绘制。<br>如需绘制完整矩形，取值范围：[0, Canvas高度)。<br>默认单位：vp | 679| w | number | 是 | 指定矩形的宽度，设置负值为向左绘制。<br>null按0处理，undefined按无效值处理，不进行绘制。<br>如需绘制完整矩形，取值范围：[-x, Canvas宽度 - x]。<br>默认单位：vp | 680| h | number | 是 | 指定矩形的高度，设置负值为向上绘制。<br>null按0处理，undefined按无效值处理，不进行绘制。<br>如需绘制完整矩形，取值范围：[-y, Canvas高度 - y]。<br>默认单位：vp | 681| radii | number \| Array\<number> | 否 | 指定用于矩形角的圆弧半径的数字或列表。<br>参数类型为number时，所有矩形角的圆弧半径按该数字执行。<br>参数类型为Array\<number>时，数目为1-4个按下面执行：<br>[所有矩形角的圆弧半径]<br>[左上及右下矩形角的圆弧半径, 右上及左下矩形角的圆弧半径]<br>[左上矩形角的圆弧半径, 右上及左下矩形角的圆弧半径, 右下矩形角的圆弧半径]<br>[左上矩形角的圆弧半径, 右上矩形角的圆弧半径, 右下矩形角的圆弧半径, 左下矩形角的圆弧半径]<br>radii存在负数或列表的数目不在[1,4]内时抛出异常，错误码：103701。<br>默认值：0，null和undefined按默认值处理。<br>圆弧半径超过矩形宽高时会等比例缩放到宽高的长度。<br>默认单位：vp | 682 683**错误码：** 684 685以下错误码的详细介绍请参见[Canvas组件错误码](../errorcode-canvas.md)。 686 687| 错误码ID | 错误信息 | 可能原因 | 688| -------- | -------- | -------- | 689| 103701 | Parameter error.| 1. The param radii is a list that has zero or more than four elements; 2. The param radii contains negative value. | 690 691**示例：** 692 693该示例展示了绘制六个圆角矩形： 694 6951. 创建一个(10vp, 10vp)为起点，宽高为100vp，四个矩形角圆弧半径为10vp的圆角矩形并填充； 696 6972. 创建一个(120vp, 10vp)为起点，宽高为100vp，四个矩形角圆弧半径为10vp的圆角矩形并填充； 698 6993. 创建一个(10vp, 120vp)为起点，宽高为100vp，左上矩形角圆弧半径及右下矩形角圆弧半径为10vp，右上矩形角圆弧半径及左下矩形角圆弧半径为20vp的圆角矩形并描边； 700 7014. 创建一个(120vp, 120vp)为起点，宽高为100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径及左下矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp的圆角矩形并描边； 702 7035. 创建一个(10vp, 230vp)为起点，宽高为100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp，左下矩形角圆弧半径为40vp的圆角矩形并描边； 704 7056. 创建一个(220vp, 330vp)为起点，宽高为-100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp，左下矩形角圆弧半径为40vp的圆角矩形并描边。 706 707 ```ts 708 // xxx.ets 709 import { BusinessError } from '@kit.BasicServicesKit'; 710 711 @Entry 712 @Component 713 struct CanvasExample { 714 private settings: RenderingContextSettings = new RenderingContextSettings(true); 715 private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); 716 private pathA: Path2D = new Path2D(); 717 private pathB: Path2D = new Path2D(); 718 719 build() { 720 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 721 Canvas(this.context) 722 .width('100%') 723 .height('100%') 724 .backgroundColor('#D5D5D5') 725 .onReady(() => { 726 try { 727 this.context.fillStyle = '#707070' 728 // 创建一个(10vp, 10vp)为起点，宽高为100vp，四个矩形角圆弧半径为10vp的圆角矩形 729 this.pathA.roundRect(10, 10, 100, 100, 10) 730 // 创建一个(120vp, 10vp)为起点，宽高为100vp，四个矩形角圆弧半径为10vp的圆角矩形 731 this.pathA.roundRect(120, 10, 100, 100, [10]) 732 this.context.fill(this.pathA) 733 // 创建一个(10vp, 120vp)为起点，宽高为100vp，左上矩形角圆弧半径及右下矩形角圆弧半径为10vp，右上矩形角圆弧半径及左下矩形角圆弧半径为20vp的圆角矩形 734 this.pathB.roundRect(10, 120, 100, 100, [10, 20]) 735 // 创建一个(120vp, 120vp)为起点，宽高为100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径及左下矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp的圆角矩形 736 this.pathB.roundRect(120, 120, 100, 100, [10, 20, 30]) 737 // 创建一个(10vp, 230vp)为起点，宽高为100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp，左下矩形角圆弧半径为40vp的圆角矩形 738 this.pathB.roundRect(10, 230, 100, 100, [10, 20, 30, 40]) 739 // 创建一个(220vp, 330vp)为起点，宽高为-100vp，左上矩形角圆弧半径为10vp，右上矩形角圆弧半径为20vp，右下矩形角圆弧半径为30vp，左下矩形角圆弧半径为40vp的圆角矩形 740 this.pathB.roundRect(220, 330, -100, -100, [10, 20, 30, 40]) 741 this.context.stroke(this.pathB) 742 } catch (error) { 743 let e: BusinessError = error as BusinessError; 744 console.error(`Failed to create roundRect. Code: ${e.code}, message: ${e.message}`); 745 } 746 }) 747 } 748 .width('100%') 749 .height('100%') 750 } 751 } 752 ``` 753 754 
