!10624 canvas文档整改

Merge pull request !10624 from lanyi/locallanyi55

zh-cn/application-dev/reference/arkui-ts/Readme-CN.md

@@ -132,12 +132,12 @@
 - 画布组件
     - [Canvas](ts-components-canvas-canvas.md)
     - [CanvasRenderingContext2D对象](ts-canvasrenderingcontext2d.md)
-    - [OffscreenCanvasRenderingContext2D对象](ts-offscreencanvasrenderingcontext2d.md)
-    - [Lottie](ts-components-canvas-lottie.md)
-    - [Path2D对象](ts-components-canvas-path2d.md)
     - [CanvasGradient对象](ts-components-canvas-canvasgradient.md)
     - [ImageBitmap对象](ts-components-canvas-imagebitmap.md)
     - [ImageData对象](ts-components-canvas-imagedata.md)
+    - [OffscreenCanvasRenderingContext2D对象](ts-offscreencanvasrenderingcontext2d.md)
+    - [Path2D对象](ts-components-canvas-path2d.md)
+    - [Lottie](ts-components-canvas-lottie.md)
 
 
 - 动画

zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

 # CanvasRenderingContext2D对象
 
+使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
+
 > **说明：**
 >
 > 从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-使用RenderingContext在Canvas组件上进行绘制，绘制对象可以是矩形、文本、图片等。
-
 
 ## 接口
 
@@ -723,6 +723,7 @@ strokeRect(x: number, y: number, w: number, h: number): void
   struct StrokeRect {
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -766,6 +767,7 @@ clearRect(x: number, y: number, w: number, h: number): void
   struct ClearRect {
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -774,8 +776,8 @@ clearRect(x: number, y: number, w: number, h: number): void
           .backgroundColor('#ffffff')
           .onReady(() =>{
             this.context.fillStyle = 'rgb(0,0,255)'
-            this.context.fillRect(0,0,500,500)
-            this.context.clearRect(20,20,150,100)
+            this.context.fillRect(20,20,200,200)
+            this.context.clearRect(30,30,150,100)
         })
       }
       .width('100%')
@@ -811,6 +813,7 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
   struct FillText {
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -855,6 +858,7 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
   struct StrokeText {
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -923,6 +927,7 @@ measureText(text: string): TextMetrics
   struct MeasureText {
     private settings: RenderingContextSettings = new RenderingContextSettings(true);
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -975,6 +980,8 @@ stroke(path?: Path2D): void
           .onReady(() =>{
             this.context.moveTo(25, 25)
             this.context.lineTo(25, 105)
+            this.context.lineTo(75, 105)
+            this.context.lineTo(75, 25)
             this.context.strokeStyle = 'rgb(0,0,255)'
             this.context.stroke()
           })
@@ -1437,7 +1444,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.context.beginPath()
-            this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
+            this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI * 2)
             this.context.stroke()
           })
       }
@@ -1618,11 +1625,11 @@ clip(fillRule?: CanvasFillRule): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.rect(0, 0, 200, 200)
+            this.context.rect(0, 0, 100, 200)
             this.context.stroke()
             this.context.clip()
             this.context.fillStyle = "rgb(255,0,0)"
-            this.context.fillRect(0, 0, 150, 150)
+            this.context.fillRect(0, 0, 200, 200)
           })
       }
       .width('100%')
@@ -1636,7 +1643,7 @@ clip(fillRule?: CanvasFillRule): void
 
 clip(path: Path2D, fillRule?: CanvasFillRule): void
 
-对封闭路径进行填充。该接口为空接口。
+设置当前路径为剪切路径
 
 **参数:** 
 
@@ -1646,6 +1653,38 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void
 | fillRule | CanvasFillRule | 否    | "nonzero" | 指定要剪切对象的规则。<br/>可选参数为："nonzero", "evenodd"。 |
 
 
+**示例:** 
+
+  ```ts
+  // xxx.ets
+@Entry
+@Component
+struct Clip {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          let region = new Path2D();
+          region.rect(80,10,20,130);
+          region.rect(40,50,100,50);
+          this.context.clip(region,"evenodd")
+          this.context.fillStyle = "rgb(255,0,0)"
+          this.context.fillRect(0, 0, this.context.width, this.context.height)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+  ```
+
+  ![zh-cn_image_000000127777779](figures/zh-cn_image_000000127777779.png)
+
 
 ### filter
 
@@ -1753,9 +1792,10 @@ scale(x: number, y: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.strokeRect(10, 10, 25, 25)
+            this.context.lineWidth = 3
+            this.context.strokeRect(30, 30, 50, 50)
             this.context.scale(2, 2) // Scale to 200%
-            this.context.strokeRect(10, 10, 25, 25)
+            this.context.strokeRect(30, 30, 50, 50)
           })
       }
       .width('100%')
@@ -1985,7 +2025,7 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
 
 createImageData(sw: number, sh: number): ImageData
 
-创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
+创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagedata.md)。
 
 **参数：**
 
@@ -1995,23 +2035,21 @@ createImageData(sw: number, sh: number): ImageData
 | sh   | number | 是    | 0    | ImageData的高度。 |
 
 
-### createImageData
-
 createImageData(imageData: ImageData): ImageData
 
-创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagebitmap.md)。
+创建新的ImageData 对象，请参考[ImageData](ts-components-canvas-imagedata.md)。
 
 **参数：**
 
 | 参数        | 类型                                       | 必填   | 默认   | 描述                |
 | --------- | ---------------------------------------- | ---- | ---- | ----------------- |
-| imagedata | [ImageData](ts-components-canvas-imagebitmap.md) | 是    | null | 复制现有的ImageData对象。 |
+| imagedata | [ImageData](ts-components-canvas-imagedata.md) | 是    | null | 复制现有的ImageData对象。 |
 
   **返回值：**
 
 | 类型                                       | 说明             |
 | ---------------------------------------- | -------------- |
-| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
+| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 |
 
 
 ### getPixelMap
@@ -2039,7 +2077,7 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
 
 getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 
-以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagebitmap.md)对象。
+以当前canvas指定区域内的像素创建[ImageData](ts-components-canvas-imagedata.md)对象。
 
 **参数：**
 
@@ -2054,7 +2092,39 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 
 | 类型                                       | 说明             |
 | ---------------------------------------- | -------------- |
-| [ImageData](ts-components-canvas-imagebitmap.md) | 新的ImageData对象。 |
+| [ImageData](ts-components-canvas-imagedata.md) | 新的ImageData对象。 |
+
+
+**示例：**
+
+  ```ts
+  // xxx.ets
+@Entry
+@Component
+struct GetImageData {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          this.context.drawImage(this.img,0,0,130,130);
+          var imagedata = this.context.getImageData(50,50,130,130);
+          this.context.putImageData(imagedata,150,150);
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+  ```
+
+  ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png)
 
 
 ### putImageData
@@ -2063,13 +2133,13 @@ putImageData(imageData: ImageData, dx: number, dy: number): void
 
 putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirtyY: number, dirtyWidth: number, dirtyHeight: number): void
 
-使用[ImageData](ts-components-canvas-imagebitmap.md)数据填充新的矩形区域。
+使用[ImageData](ts-components-canvas-imagedata.md)数据填充新的矩形区域。
 
 **参数：**
 
 | 参数          | 类型                                       | 必填   | 默认值          | 描述                            |
 | ----------- | ---------------------------------------- | ---- | ------------ | ----------------------------- |
-| imagedata   | [ImageData](ts-components-canvas-imagebitmap.md) | 是    | null         | 包含像素值的ImageData对象。            |
+| imagedata   | [ImageData](ts-components-canvas-imagedata.md) | 是    | null         | 包含像素值的ImageData对象。            |
 | dx          | number                                   | 是    | 0            | 填充区域在x轴方向的偏移量。                |
 | dy          | number                                   | 是    | 0            | 填充区域在y轴方向的偏移量。                |
 | dirtyX      | number                                   | 否    | 0            | 源图像数据矩形裁切范围左上角距离源图像左上角的x轴偏移量。 |
@@ -2144,6 +2214,7 @@ setLineDash(segments: number[]): void
           .onReady(() =>{
             this.context.arc(100, 75, 50, 0, 6.28)
             this.context.setLineDash([10,20])
+            this.context.stroke()
           })
       }
       .width('100%')
@@ -2167,24 +2238,34 @@ getLineDash(): number[]
 | -------- | ------------------------ |
 | number[] | 返回数组，该数组用来描述线段如何交替和间距长度。 |
 
+
 **示例：** 
 
   ```ts
   // xxx.ets
-  @Entry
-  @Component
-  struct GetLineDash {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-    
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+@Entry
+@Component
+struct CanvasGetLineDash {
+  @State message: string = 'Hello World'
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+          .onClick(()=>{
+            console.error('before getlinedash clicked')
+            let res = this.context.getLineDash()
+            console.error(JSON.stringify(res))
+          })
         Canvas(this.context)
           .width('100%')
           .height('100%')
           .backgroundColor('#ffff00')
-          .onReady(() =>{
-            var grad = this.context.createLinearGradient(50,0, 300,100)
+          .onReady(() => {
             this.context.arc(100, 75, 50, 0, 6.28)
             this.context.setLineDash([10,20])
             this.context.stroke();
@@ -2192,10 +2273,13 @@ getLineDash(): number[]
           })
       }
       .width('100%')
-      .height('100%')
     }
+    .height('100%')
   }
+}
   ```
+![zh-cn_image_000000127777778](figures/zh-cn_image_000000127777778.png) 
+
 
 
 ### imageSmoothingQuality
@@ -2222,7 +2306,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
 
 | 参数     | 类型                                       | 描述                 |
 | ------ | ---------------------------------------- | ------------------ |
-| bitmap | [ImageData](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 |
+| bitmap | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 待显示的ImageBitmap对象。 |
 
 **示例：** 
 
@@ -2230,7 +2314,7 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
   // xxx.ets
   @Entry
   @Component
-  struct PutImageData {
+  struct TransferFromImageBitmap {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -2259,7 +2343,8 @@ transferFromImageBitmap(bitmap: ImageBitmap): void
     }
   }
   ```
-  ![zh-cn_image_000000127777773](figures/zh-cn_image_000000127777773.png)  
+  ![zh-cn_image_0000001238952387](figures/zh-cn_image_0000001238952387.png)  
+
 
 ### toDataURL
 
@@ -2330,7 +2415,11 @@ restore(): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.restore()
+            this.context.save(); // save the default state
+            this.context.fillStyle = "green";
+            this.context.fillRect(20, 20, 100, 100);
+            this.context.restore(); // restore to the default state
+            this.context.fillRect(150, 75, 100, 100);
           })
       }
       .width('100%')
@@ -2338,6 +2427,7 @@ restore(): void
     }
   }
   ```
+  ![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png)
 
 
 ### save
@@ -2363,14 +2453,19 @@ save(): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.save()
-        })
+            this.context.save(); // save the default state
+            this.context.fillStyle = "green";
+            this.context.fillRect(20, 20, 100, 100);
+            this.context.restore(); // restore to the default state
+            this.context.fillRect(150, 75, 100, 100);
+          })
       }
       .width('100%')
       .height('100%')
     }
   }
   ```
+  ![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png)
 
 
 ### createLinearGradient

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md

 #  Canvas
 
-> **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
-
 提供画布组件，用于自定义绘制图形。
 
+> **说明：** 
+> 
+>  该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+
+
+
 ## 权限列表
 
 无
@@ -34,7 +38,8 @@ Canvas(context?: CanvasRenderingContext2D)
 | ----------------------------- | ---- | -------------------- |
 | onReady(event: () => void) | 无    | Canvas组件初始化完成时的事件回调，该事件之后Canvas组件宽高确定且可获取，可使用Canvas相关API进行绘制。 |
 
-## 示例
+
+**示例：**
 
 ```ts
 // xxx.ets
@@ -59,3 +64,4 @@ struct CanvasExample {
   }
 }
 ```
+  ![zh-cn_image_0000001194032666](figures/zh-cn_image_0000001194032666.png)
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md

 # CanvasGradient对象
 
+渐变对象。
+
 >  **说明：**
+> 
 >  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-渐变对象。
-
 
 ## addColorStop
 
@@ -13,13 +14,16 @@ addColorStop(offset: number, color: string): void
 
 设置渐变断点值，包括偏移和颜色。
 
-- 参数
+
+**参数：**
+
   | 参数     | 类型     | 必填   | 默认值       | 描述                           |
   | ------ | ------ | ---- | --------- | ---------------------------- |
   | offset | number | 是    | 0         | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
   | color  | string | 是    | '#ffffff' | 设置渐变的颜色。                     |
 
-- 示例
+
+**示例：**
 
   ```ts
   // xxx.ets
@@ -48,10 +52,6 @@ addColorStop(offset: number, color: string): void
       .height('100%')
     }}
   ```
-
-
-
-
   ![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png)
 
  
\ No newline at end of file

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md

 # ImageBitmap对象
 
+ImageBitmap对象可以存储canvas渲染的像素数据。
+
 >  **说明：**
+> 
 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-ImageBitmap对象可以存储canvas渲染的像素数据。
-
 
 ## 属性
 
@@ -14,6 +15,36 @@ ImageBitmap对象可以存储canvas渲染的像素数据。
 | width | number | ImageBitmap的像素宽度。 | 
 | height | number | ImageBitmap的像素高度。 | 
 
+**示例：**
+
+  ```ts
+  // xxx.ets
+  @Entry
+  @Component
+  struct ImageExample {
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+
+    build() {
+      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+        Canvas(this.context)
+          .width('100%')
+          .height('100%')
+          .backgroundColor('#ffff00')
+          .onReady(() =>{
+            this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
+        })
+      }
+      .width('100%')
+      .height('100%')
+    }
+  }
+  ```
+
+  ![zh-cn_image_0000001194352442](figures/zh-cn_image_0000001194352442.png)
+
+
 
 ## 方法
 

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md

 # ImageData对象
 
+ImageData对象可以存储canvas渲染的像素数据。
+
 >  **说明：**
+> 
 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-ImageData对象可以存储canvas渲染的像素数据。
-
 
 ## 属性
 
@@ -15,3 +16,34 @@ ImageData对象可以存储canvas渲染的像素数据。
 | height | number | 矩形区域实际像素高度。 | 
 | data | Uint8ClampedArray | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | 
 
+**示例：**
+
+  ```ts
+  // xxx.ets
+@Entry
+@Component
+struct Translate {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true);
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() =>{
+          this.context.drawImage(this.img,0,0,130,130);
+          var imagedata = this.context.getImageData(50,50,130,130);
+          this.context.putImageData(imagedata,150,150);
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
+  ```
+
+  ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png)
+

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md

@@ -3,13 +3,10 @@
 提供Lottie动画。
 
 > **说明：**
+> 
 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-## 权限列表
-
-无
-
 
 ## 导入模块
 
@@ -32,7 +29,8 @@ path: string, container: object, render: string, loop: boolean, autoplay: boolea
 
 加载动画，须提前声明Animator('__lottie_ets')对象，并在Canvas完成布局后调用。可配合Canvas组件生命周期接口使用，比如onAppear()与onPageShow()。
 
-- 参数
+**参数：**
+
   | 参数             | 类型                          | 必填   | 描述                                       |
   | -------------- | --------------------------- | ---- | ---------------------------------------- |
   | path           | string                      | 是    | hap包内动画资源文件路径，仅支持json格式。示例：path: "common/lottie/data.json" |
@@ -50,12 +48,13 @@ destroy(name: string): void
 
 销毁动画，页面退出时，必须调用。可配合Canvas组件生命周期接口使用，比如onDisappear()与onPageHide()。
 
-- 参数
+**参数：**
+
   | 参数   | 类型     | 必填   | 描述                                       |
   | ---- | ------ | ---- | ---------------------------------------- |
   | name | string | 是    | 被指定的动画名，同loadAnimation接口参数name, 缺省时销毁所有动画。 |
 
-- 示例
+**示例：**  
   ```ts
   // xxx.ets
   import lottie from '@ohos/lottieETS'
@@ -130,12 +129,14 @@ play(name: string): void
 
 播放指定动画。
 
-- 参数
+**参数：**
+
   | 参数   | 类型     | 必填   | 描述                                       |
   | ---- | ------ | ---- | ---------------------------------------- |
   | name | string | 是    | 被指定的动画名, 同loadAnimation接口参数name，缺省时播放所有动画。 |
 
-- 示例
+**示例：**
+
   ```ts
   lottie.play(this.animateName)
   ```
@@ -147,12 +148,14 @@ pause(name: string): void
 
 暂停指定动画，下次调用lottie.play()从当前帧开始。
 
-- 参数
+**参数：**
+
   | 参数   | 类型     | 必填   | 描述                                       |
   | ---- | ------ | ---- | ---------------------------------------- |
   | name | string | 是    | 被指定的动画名，同loadAnimation接口入参name，缺省时暂停所有动画。 |
 
-- 示例
+**示例：**
+
   ```ts
   lottie.pause(this.animateName)
   ```
@@ -164,12 +167,14 @@ togglePause(name: string): void
 
 暂停或播放指定动画，等效于lottie.play()与lottie.pause()切换调用。
 
-- 参数
+**参数：**
+
   | 参数   | 类型     | 必填   | 描述                                       |
   | ---- | ------ | ---- | ---------------------------------------- |
   | name | string | 是    | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
 
-- 示例
+**示例：**
+
   ```ts
   lottie.togglePause(this.animateName)
   ```
@@ -181,12 +186,14 @@ stop(name: string): void
 
 停止指定动画，下次调用lottie.play()从第一帧开始。
 
-- 参数
+**参数：**
+
   | 参数   | 类型     | 必填   | 描述                                       |
   | ---- | ------ | ---- | ---------------------------------------- |
   | name | string | 是    | 被指定的动画名，同loadAnimation接口参数name，缺省时停止所有动画。 |
 
-- 示例
+**示例：**
+
   ```ts
   lottie.stop(this.animateName)
   ```
@@ -198,13 +205,15 @@ setSpeed(speed: number, name: string): void
 
 设置指定动画播放速度。
 
-- 参数
+**参数：**
+
   | 参数    | 类型     | 必填   | 描述                                       |
   | ----- | ------ | ---- | ---------------------------------------- |
   | speed | number | 是    | 值为浮点类型, speed>0正向播放, speed<0反向播放, speed=0暂停播放, speed=1.0/-1.0正常速度播放。 |
   | name  | string | 是    | 被指定的动画，同loadAnimation接口参数name，缺省时停止所有动画。 |
 
-- 示例
+**示例：**
+
   ```ts
   lottie.setSpeed(5, this.animateName)
   ```
@@ -216,13 +225,15 @@ setDirection(direction: AnimationDirection, name: string): void
 
 设置指定动画播放顺序。
 
-- 参数
+**参数：**
+
   | 参数        | 类型                 | 必填   | 描述                                       |
   | --------- | ------------------ | ---- | ---------------------------------------- |
   | direction | AnimationDirection | 是    | 1为正向，-1为反向;&nbsp;当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed&lt;0叠加时也是倒放。<br/>AnimationDirection：1&nbsp;\|&nbsp;-1 |
   | name      | string             | 是    | 被指定的动画名，同loadAnimation接口参数name，缺省时设置所有动画方向。 |
 
-- 示例
+**示例：**
+
   ```ts
   lottie.setDirection(-1, this.animateName)
   ```
@@ -262,12 +273,14 @@ play(name?: string): void
 
 播放动画。
 
-- 参数
+**参数：**
+
   | 参数   | 类型     | 必填   | 描述              |
   | ---- | ------ | ---- | --------------- |
   | name | string | 否    | 被指定的动画名，缺省默认为空。 |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.play()
   ```
@@ -279,12 +292,14 @@ destroy(name?: string): void
 
 销毁动画。
 
-- 参数
+**参数：**
+
   | 参数   | 类型     | 必填   | 描述              |
   | ---- | ------ | ---- | --------------- |
   | name | string | 否    | 被指定的动画名，缺省默认为空。 |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.destroy()
   ```
@@ -296,12 +311,14 @@ pause(name?: string): void
 
 暂停动画，下次调用play接口从当前帧开始播放。
 
-- 参数
+**参数：**
+
   | 参数   | 类型     | 必填   | 描述              |
   | ---- | ------ | ---- | --------------- |
   | name | string | 否    | 被指定的动画名，缺省默认为空。 |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.pause()
   ```
@@ -313,12 +330,14 @@ togglePause(name?: string): void
 
 暂停或播放动画，等效于play接口与pause接口之间轮换调用。
 
-- 参数
+**参数：**
+
   | 参数   | 类型     | 必填   | 描述              |
   | ---- | ------ | ---- | --------------- |
   | name | string | 否    | 被指定的动画名，缺省默认为空。 |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.togglePause()
   ```
@@ -330,12 +349,14 @@ stop(name?: string): void
 
 停止动画，下次调用play接口从第一帧开始播放。
 
-- 参数
+**参数：**
+
   | 参数   | 类型     | 必填   | 描述              |
   | ---- | ------ | ---- | --------------- |
   | name | string | 否    | 被指定的动画名，缺省默认为空。 |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.stop()
   ```
@@ -347,12 +368,14 @@ setSpeed(speed: number): void
 
 设置动画播放速度。
 
-- 参数
+**参数：**
+
   | 参数    | 类型     | 必填   | 描述                                       |
   | ----- | ------ | ---- | ---------------------------------------- |
   | speed | number | 是    | 值为浮点类型,&nbsp;speed&gt;0正向播放,&nbsp;speed&lt;0反向播放,&nbsp;speed=0暂停播放,&nbsp;speed=1.0&nbsp;\|&nbsp;-1.0正常速度播放。 |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.setSpeed(5);
   ```
@@ -364,12 +387,14 @@ setDirection(direction: AnimationDirection): void
 
 设置动画播放顺序。
 
-- 参数
+**参数：**
+
   | 参数        | 类型                 | 必填   | 描述                                       |
   | --------- | ------------------ | ---- | ---------------------------------------- |
   | direction | AnimationDirection | 是    | 1为正向，-1为反向;&nbsp;当设置为反向时，从当前播放进度开始回播直到首帧，loop值为true时可无限倒放；speed&lt;0叠加时也是倒放。<br/>AnimationDirection：1&nbsp;\|&nbsp;-1。 |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.setDirection(-1)
   ```
@@ -381,14 +406,16 @@ goToAndStop(value: number, isFrame?: boolean): void
 
 设置动画停止在指定帧或时间进度。
 
-- 参数
+**参数：**
+
   | 参数      | 类型      | 必填   | 描述                                       |
   | ------- | ------- | ---- | ---------------------------------------- |
   | value   | number  | 是    | 帧号(值大于等于0)或时间进度(ms)。                     |
   | isFrame | boolean | 否    | true:&nbsp;按指定帧控制，false:按指定时间控制，缺省默认false。 |
   | name    | string  | 否    | 被指定的动画名，缺省默认为空。                          |
 
-- 示例
+**示例：**
+
   ```ts
   // 按帧号控制
   this.animateItem.goToAndStop(25, true)
@@ -403,14 +430,16 @@ goToAndPlay(value: number, isFrame: boolean, name?: string): void
 
 设置动画从指定帧或时间进度开始播放。
 
-- 参数
+**参数：**
+
   | 参数      | 类型      | 必填   | 描述                                       |
   | ------- | ------- | ---- | ---------------------------------------- |
   | value   | number  | 是    | 帧号(值大于等于0)或时间进度(ms)                      |
   | isFrame | boolean | 是    | true：按指定帧控制，&nbsp;false：按指定时间控制，缺省默认false。 |
   | name    | string  | 否    | 被指定的动画名，缺省默认为空。                          |
 
-- 示例
+**示例：**
+
   ```ts
   // 按帧号控制
   this.animateItem.goToAndPlay(25, true)
@@ -425,13 +454,15 @@ playSegments(segments: AnimationSegment | AnimationSegment[], forceFlag: boolean
 
 设置动画仅播放指定片段。
 
-- 参数
+**参数：**
+
   | 参数        | 类型                                       | 必填   | 描述                                       |
   | --------- | ---------------------------------------- | ---- | ---------------------------------------- |
   | segments  | AnimationSegment&nbsp;=&nbsp;[number,&nbsp;number]&nbsp;\|&nbsp;AnimationSegment[] | 是    | 片段或片段列表；<br/>如果片段列表全部播放完毕后，下轮循环播放仅播放最后一个片段 |
   | forceFlag | boolean                                  | 是    | true：即时生效播放，false：延迟到下轮循环播放再生效           |
 
-- 示例
+**示例：**
+
   ```ts
   // 指定播放片段
   this.animateItem.playSegments([10, 20], false)
@@ -446,12 +477,14 @@ resetSegments(forceFlag: boolean): void
 
 重置动画播放片段，播放全帧。
 
-- 参数
+**参数：**
+
   | 参数        | 类型      | 必填   | 描述                             |
   | --------- | ------- | ---- | ------------------------------ |
   | forceFlag | boolean | 是    | true：即时生效播放，false：延迟到下轮循环播放再生效 |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.resetSegments(true)
   ```
@@ -463,7 +496,8 @@ resize(): void
 
 刷新动画布局。
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.resize()
   ```
@@ -475,12 +509,14 @@ setSubframe(useSubFrame: boolean): void
 
 设置属性currentFrame的精度显示浮点数。
 
-- 参数
+**参数：**
+
   | 参数           | 类型      | 必填   | 描述                                       |
   | ------------ | ------- | ---- | ---------------------------------------- |
   | useSubFrames | boolean | 是    | currentFrame属性默认显示浮点数，该接口参数将影响currentFrame属性的精度。<br/>true：属性currentFrame显示浮点。<br/>false：属性currentFrame去浮点数显示整数。 |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.setSubframe(false)
   ```
@@ -492,12 +528,14 @@ getDuration(inFrames?: boolean): void
 
 获取动画单次完整播放的时间(与播放速度无关)或帧数, 与Lottie.loadAnimation接口入参initialSegment有关。
 
-- 参数
+**参数：**
+
   | 参数       | 类型      | 必填   | 描述                                       |
   | -------- | ------- | ---- | ---------------------------------------- |
   | inFrames | boolean | 否    | true：获取帧数，&nbsp;false：获取时间(单位ms)，缺省默认false。 |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.getDuration(true)
   ```
@@ -509,13 +547,15 @@ addEventListener&lt;T = any&gt;(name: AnimationEventName, callback: AnimationEve
 
 添加侦听事件, 事件完成后会触发指定回调函数。返回可删除该侦听事件的函数对象。
 
-- 参数
+**参数：**
+
   | 参数       | 类型                              | 必填   | 描述                                       |
   | -------- | ------------------------------- | ---- | ---------------------------------------- |
   | name     | AnimationEventName              | 是    | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：<br/>'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
   | callback | AnimationEventCallback&lt;T&gt; | 是    | 用户自定义回调函数                                |
 
-- 示例
+**示例：**
+
   ```ts
   private callbackItem: any = function() {
       console.log("grunt loopComplete")
@@ -533,13 +573,15 @@ removeEventListener&lt;T = any&gt;(name: AnimationEventName, callback?: Animatio
 
 删除侦听事件。
 
-- 参数
+**参数：**
+
   | 参数       | 类型                              | 必填   | 描述                                       |
   | -------- | ------------------------------- | ---- | ---------------------------------------- |
   | name     | AnimationEventName              | 是    | 指定动画事件类型，Lottie内置动画事件类型AnimationEventName：<br/>'enterFrame'、'loopComplete'、'complete'、'segmentStart'、'destroy'、'config_ready'、'data_ready'、'DOMLoaded'、'error'、'data_failed'、'loaded_images' |
   | callback | AnimationEventCallback&lt;T&gt; | 否    | 用户自定义回调函数；缺省为空时，删除此事件的所有回调函数。            |
 
-- 示例
+**示例：**
+
   ```ts
   this.animateItem.removeEventListener('loopComplete', this.animateName)
   ```
@@ -551,13 +593,15 @@ triggerEvent&lt;T = any&gt;(name: AnimationEventName, args: T): void
 
 直接触发指定事件的所有已设置的回调函数。
 
-- 参数
+**参数：**
+
   | 参数   | 类型                 | 必填   | 描述        |
   | ---- | ------------------ | ---- | --------- |
   | name | AnimationEventName | 是    | 指定动画事件类型  |
   | args | any                | 是    | 用户自定义回调参数 |
 
-- 示例
+**示例：**
+
   ```ts
   private triggerCallBack: any = function(item) {
       console.log("trigger loopComplete, name:" + item.name)

zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md

 # Path2D对象
 
+路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
+
 >  **说明：**
+> 
 > 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
-
 
 ## addPath
 
@@ -225,7 +226,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.path2Db.moveTo(10, 10)
-            this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db)
+            this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20)
+            this.context.stroke(this.path2Db)
           })
       }
       .width('100%')
@@ -319,7 +321,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db)
+            this.path2Db.arc(100, 75, 50, 0, 6.28)
+            this.context.stroke(this.path2Db)
           })
       }
       .width('100%')
@@ -407,7 +410,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private path2Db: Path2D = new Path2D()
-  
+
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -415,7 +418,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
+            this.path2Db.ellipse(200, 200, 50, 100, 0, Math.PI * 1, Math.PI*2)
             this.context.stroke(this.path2Db)
           })
       }
@@ -461,7 +464,8 @@ rect(x: number, y: number, w: number, h: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db)
+            this.path2Db.rect(20, 20, 100, 100);
+            this.context.stroke(this.path2Db)
           })
       }
       .width('100%')