Canvas 文档格式整改

Signed-off-by: Nlanyill <lanyi3@huawei.com>

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

@@ -77,7 +77,7 @@ struct FillStyleExample {
         .backgroundColor('#ffff00')
         .onReady(() =>{
           this.context.fillStyle = '#0000ff'
-          this.context.fillRect(20, 160, 150, 100)
+          this.context.fillRect(20, 20, 150, 100)
         })
     }
     .width('100%')
@@ -1653,9 +1653,9 @@ clip(path: Path2D, fillRule?: CanvasFillRule): void
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct Clip {
+  @Entry
+  @Component
+  struct Clip {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     build() {
@@ -1681,7 +1681,7 @@ struct Clip {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
 
   ![zh-cn_image_000000127777779](figures/zh-cn_image_000000127777779.png)
@@ -2104,9 +2104,9 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct GetImageData {
+  @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")
@@ -2126,7 +2126,7 @@ struct GetImageData {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
 
   ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png)
@@ -2248,9 +2248,9 @@ getLineDash(): number[]
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct CanvasGetLineDash {
+  @Entry
+  @Component
+  struct CanvasGetLineDash {
     @State message: string = 'Hello World'
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
@@ -2281,7 +2281,7 @@ struct CanvasGetLineDash {
       }
       .height('100%')
     }
-}
+  }
   ```
 ![zh-cn_image_000000127777778](figures/zh-cn_image_000000127777778.png) 
 
@@ -2376,9 +2376,9 @@ toDataURL(type?: string, quality?: number): string
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct ToDataURL {
+  @Entry
+  @Component
+  struct ToDataURL {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
@@ -2395,7 +2395,7 @@ struct ToDataURL {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
 
 
@@ -2512,7 +2512,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
             this.context.fillStyle = grad
-            this.context.fillRect(0, 0, 500, 500)
+            this.context.fillRect(0, 0, 400, 400)
           })
       }
       .width('100%')
@@ -2563,7 +2563,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
             this.context.fillStyle = grad
-            this.context.fillRect(0, 0, 500, 500)
+            this.context.fillRect(0, 0, 440, 440)
           })
       }
       .width('100%')

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

@@ -47,7 +47,7 @@ struct Page45 {
           grad.addColorStop(0.5, '#ffffff')
           grad.addColorStop(1.0, '#00ff00')
           this.context.fillStyle = grad
-          this.context.fillRect(0, 0, 500, 500)
+          this.context.fillRect(0, 0, 400, 400)
         })
     }
     .width('100%')

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

@@ -24,12 +24,12 @@ ImageData对象可以存储canvas渲染的像素数据。
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct Translate {
+  @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")
+    private img:ImageBitmap = new ImageBitmap("common/images/1234.png")
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -46,7 +46,7 @@ struct Translate {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
 
   ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png)

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

 # Path2D对象
 
-路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
+路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口或者fill接口进行绘制。
 
 >  **说明：**
 > 

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

@@ -66,7 +66,7 @@ struct FillStyleExample {
         .backgroundColor('#ffff00')
         .onReady(() =>{
           this.offContext.fillStyle = '#0000ff'
-          this.offContext.fillRect(20, 160, 150, 100)
+          this.offContext.fillRect(20, 20, 150, 100)
           var image = this.offContext.transferToImageBitmap()
           this.context.transferFromImageBitmap(image)
         })
@@ -1752,9 +1752,9 @@ clip(path:Path2D, fillRule?: CanvasFillRule): void
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct Clip {
+  @Entry
+  @Component
+  struct Clip {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -1784,7 +1784,7 @@ struct Clip {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
 
   ![zh-cn_image_000000127777779](figures/zh-cn_image_000000127777779.png)
@@ -2189,6 +2189,27 @@ getPixelMap(sx: number, sy: number, sw: number, sh: number): PixelMap
 | ---------------------------------------- | ------------ |
 | [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 |
 
+### setPixelMap
+
+setPixelMap(value?: PixelMap): void
+
+将当前传入[PixelMap](../apis/js-apis-image.md#pixelmap7)对象绘制在画布上。
+
+ **参数：**
+
+| 参数   | 类型     | 必填   | 默认值  | 描述              |
+| ---- | ------ | ---- | ---- | --------------- |
+| sx   | number | 是    | 0    | 需要输出的区域的左上角x坐标。 |
+| sy   | number | 是    | 0    | 需要输出的区域的左上角y坐标。 |
+| sw   | number | 是    | 0    | 需要输出的区域的宽度。     |
+| sh   | number | 是    | 0    | 需要输出的区域的高度。     |
+
+**返回值：**
+
+| 类型                                       | 说明           |
+| ---------------------------------------- | ------------ |
+| [PixelMap](../apis/js-apis-image.md#pixelmap7) | 新的PixelMap对象 |
+
 
 ### getImageData
 
@@ -2216,9 +2237,9 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct GetImageData {
+  @Entry
+  @Component
+  struct GetImageData {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -2241,7 +2262,7 @@ struct GetImageData {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
 
   ![zh-cn_image_000000127777780](figures/zh-cn_image_000000127777780.png)
@@ -2319,9 +2340,9 @@ setLineDash(segments: number[]): void
 **示例：** 
 
   ```ts
-@Entry
-@Component
-struct SetLineDash {
+  @Entry
+  @Component
+  struct SetLineDash {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -2343,7 +2364,7 @@ struct SetLineDash {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
   ![zh-cn_image_000000127777772](figures/zh-cn_image_000000127777772.png)
 
@@ -2364,9 +2385,9 @@ getLineDash(): number[]
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct OffscreenCanvasGetLineDash {
+  @Entry
+  @Component
+  struct OffscreenCanvasGetLineDash {
     @State message: string = 'Hello World'
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
@@ -2399,7 +2420,7 @@ struct OffscreenCanvasGetLineDash {
       }
       .height('100%')
     }
-}
+  }
   ```
 ![zh-cn_image_000000127777778](figures/zh-cn_image_000000127777778.png) 
 
@@ -2429,10 +2450,10 @@ toDataURL(type?: string, quality?: number): string
 **示例：**
 
   ```ts
-// xxx.ets
-@Entry
-@Component
-struct ToDataURL {
+  // xxx.ets  
+  @Entry
+  @Component
+  struct ToDataURL {
       private settings: RenderingContextSettings = new RenderingContextSettings(true)
       private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
       private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -2450,7 +2471,7 @@ struct ToDataURL {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
 
 
@@ -2527,9 +2548,9 @@ restore(): void
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct CanvasExample {
+  @Entry
+  @Component
+  struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -2553,7 +2574,7 @@ struct CanvasExample {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
 ![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png) 
 
@@ -2568,9 +2589,9 @@ save(): void
 
   ```ts
   // xxx.ets
-@Entry
-@Component
-struct CanvasExample {
+  @Entry
+  @Component
+  struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
@@ -2594,7 +2615,7 @@ struct CanvasExample {
       .width('100%')
       .height('100%')
     }
-}
+  }
   ```
 ![zh-cn_image_000000127777781](figures/zh-cn_image_000000127777781.png) 
 
@@ -2637,7 +2658,7 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
             this.offContext.fillStyle = grad
-            this.offContext.fillRect(0, 0, 500, 500)
+            this.offContext.fillRect(0, 0, 400, 400)
             var image = this.offContext.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })
@@ -2691,7 +2712,7 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
             grad.addColorStop(0.5, '#ffffff')
             grad.addColorStop(1.0, '#00ff00')
             this.offContext.fillStyle = grad
-            this.offContext.fillRect(0, 0, 500, 500)
+            this.offContext.fillRect(0, 0, 440, 440)
             var image = this.offContext.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)
           })