canvas文档整改-3.1release

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

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

 #  Canvas
 
-> **说明：** 
->
-> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> **说明：** 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 提供画布组件，用于自定义绘制图形。
 
@@ -16,13 +14,13 @@
 
 ## 接口
 
-Canvas(context: CanvasRenderingContext2D)
+Canvas(context?: CanvasRenderingContext2D)
 
 **参数：**
 
-| 参数名     | 参数类型                                     | 必填   | 默认值  | 参数描述                         |
-| ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
-| context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 是    | -    | 见CanvasRenderingContext2D对象。 |
+  | 参数名     | 参数类型                                     | 必填   | 默认值  | 参数描述                         |
+  | ------- | ---------------------------------------- | ---- | ---- | ---------------------------- |
+  | context | [CanvasRenderingContext2D](ts-canvasrenderingcontext2d.md) | 否    | -    | 见CanvasRenderingContext2D对象。 |
 
 ## 属性
 
@@ -34,7 +32,7 @@ Canvas(context: CanvasRenderingContext2D)
 
 | 名称                            | 参数   | 描述                   |
 | ----------------------------- | ---- | -------------------- |
-| onReady(callback: () => void) | 无    | 画布组件的事件回调，可以在此时进行绘制。 |
+| onReady(event: () => void) | 无    | 画布组件的事件回调，可以在此时进行绘制。 |
 
 ## 示例
 

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

 # ImageBitmap对象
 
 >  **说明：**
->
->  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
-CanvasImageData对象可以存储canvas渲染的像素数据。
+ImageBitmap对象可以存储canvas渲染的像素数据。
 
 
 ## 属性
 
-| 属性     | 类型                        | 描述                           |
-| ------ | ------------------------- | ---------------------------- |
-| width  | number                    | 矩形区域实际像素宽度。                  |
-| height | number                    | 矩形区域实际像素高度。                  |
-| data   | <Uint8ClampedArray> | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
+| 属性 | 类型 | 描述 | 
+| -------- | -------- | -------- |
+| width | number | ImageBitmap的像素宽度。 | 
+| height | number | ImageBitmap的像素高度。 | 
+
+
+## 方法
+
+
+### close
+
+close()
+
+释放ImageBitmap对象相关联的所有图形资源。该接口为空接口。
\ No newline at end of file

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

 # ImageData对象
 
 >  **说明：**
->
->  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 ImageData对象可以存储canvas渲染的像素数据。
@@ -10,8 +9,9 @@ ImageData对象可以存储canvas渲染的像素数据。
 
 ## 属性
 
-| 属性     | 类型                        | 描述                           |
-| ------ | ------------------------- | ---------------------------- |
-| width  | number                    | 矩形区域实际像素宽度。                  |
-| height | number                    | 矩形区域实际像素高度。                  |
-| data   | <Uint8ClampedArray> | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 |
+| 属性 | 类型 | 描述 | 
+| -------- | -------- | -------- |
+| width | number | 矩形区域实际像素宽度。 | 
+| height | number | 矩形区域实际像素高度。 | 
+| data | Uint8ClampedArray | 一维数组，保存了相应的颜色数据，数据值范围为0到255。 | 
+

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

 # Path2D对象
 
 >  **说明：**
->
->  从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
+> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
 
 
 路径对象，支持通过对象的接口进行路径的描述，并通过Canvas的stroke接口进行绘制。
@@ -10,26 +9,31 @@
 
 ## addPath
 
-addPath(path: Object): void
+addPath(path: path2D, transform?:Matrix2D): void
 
 将另一个路径添加到当前的路径对象中。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述             |
-  | ---- | ------ | ---- | ---- | -------------- |
-  | path | Object | 是    | null | 需要添加到当前路径的路径对象 |
+**参数：**
 
-- 示例
-  ```
+  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | path | path2D | 是 | - | 需要添加到当前路径的路径对象。| 
+  | transform | Matrix2D | 否 | null | 新增路径的变换矩阵对象。 | 
+  
+
+**示例：**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct AddPath {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+  
     private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
     private path2Db: Path2D = new Path2D()
-
+  
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -56,15 +60,17 @@ closePath(): void
 
 将路径的当前点移回到路径的起点，当前点到起点间画一条直线。如果形状已经闭合或只有一个点，则此功能不执行任何操作。
 
-- 示例
-  ```
+**示例：**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct ClosePath {
     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)
@@ -94,21 +100,24 @@ moveTo(x: number, y: number): void
 
 将路径的当前坐标点移动到目标点，移动过程中不绘制线条。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述      |
-  | ---- | ------ | ---- | ---- | ------- |
-  | x    | number | 是    | 0    | 目标点X轴坐标 |
-  | y    | number | 是    | 0    | 目标点Y轴坐标 |
+**参数：**
 
-- 示例
-  ```
+  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | 是 | 0 | 目标点X轴坐标。 | 
+  | y | number | 是 | 0 | 目标点Y轴坐标。 | 
+
+**示例：**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct MoveTo {
     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)
@@ -138,21 +147,24 @@ lineTo(x: number, y: number): void
 
 从当前点绘制一条直线到目标点。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述      |
-  | ---- | ------ | ---- | ---- | ------- |
-  | x    | number | 是    | 0    | 目标点X轴坐标 |
-  | y    | number | 是    | 0    | 目标点Y轴坐标 |
+**参数：**
 
-- 示例
-  ```
+  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | 是 | 0 | 目标点X轴坐标。 | 
+  | y | number | 是 | 0 | 目标点Y轴坐标。 | 
+
+**示例：**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct LineTo {
     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)
@@ -183,25 +195,28 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
 
 创建三次贝赛尔曲线的路径。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述             |
-  | ---- | ------ | ---- | ---- | -------------- |
-  | cp1x | number | 是    | 0    | 第一个贝塞尔参数的x坐标值。 |
-  | cp1y | number | 是    | 0    | 第一个贝塞尔参数的y坐标值。 |
-  | cp2x | number | 是    | 0    | 第二个贝塞尔参数的x坐标值。 |
-  | cp2y | number | 是    | 0    | 第二个贝塞尔参数的y坐标值。 |
-  | x    | number | 是    | 0    | 路径结束时的x坐标值。    |
-  | y    | number | 是    | 0    | 路径结束时的y坐标值。    |
-
-- 示例
-  ```
+**参数：**
+
+  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | cp1x | number | 是 | 0 | 第一个贝塞尔参数的x坐标值。 | 
+  | cp1y | number | 是 | 0 | 第一个贝塞尔参数的y坐标值。 | 
+  | cp2x | number | 是 | 0 | 第二个贝塞尔参数的x坐标值。 | 
+  | cp2y | number | 是 | 0 | 第二个贝塞尔参数的y坐标值。 | 
+  | x | number | 是 | 0 | 路径结束时的x坐标值。 | 
+  | y | number | 是 | 0 | 路径结束时的y坐标值。 | 
+
+**示例：**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct BezierCurveTo {
     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)
@@ -228,23 +243,26 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
 
 创建二次贝赛尔曲线的路径。
 
-- 参数
-  | 参数   | 类型     | 必填   | 默认值  | 描述          |
-  | ---- | ------ | ---- | ---- | ----------- |
-  | cpx  | number | 是    | 0    | 贝塞尔参数的x坐标值。 |
-  | cpy  | number | 是    | 0    | 贝塞尔参数的y坐标值。 |
-  | x    | number | 是    | 0    | 路径结束时的x坐标值。 |
-  | y    | number | 是    | 0    | 路径结束时的y坐标值。 |
+**参数：**
 
-- 示例
-  ```
+  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | cpx | number | 是 | 0 | 贝塞尔参数的x坐标值。 | 
+  | cpy | number | 是 | 0 | 贝塞尔参数的y坐标值。 | 
+  | x | number | 是 | 0 | 路径结束时的x坐标值。 | 
+  | y | number | 是 | 0 | 路径结束时的y坐标值。 | 
+
+**示例：**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct QuadraticCurveTo {
     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)
@@ -268,29 +286,32 @@ quadraticCurveTo(cpx: number, cpy: number, x: number ,y: number): void
 
 ## arc
 
-arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): void
+arc(x: number, y: number, radius: number, startAngle: number, endAngle: number, counterclockwise?: boolean): void
 
 绘制弧线路径。
 
-- 参数
-  | 参数            | 类型      | 必填   | 默认值   | 描述         |
-  | ------------- | ------- | ---- | ----- | ---------- |
-  | x             | number  | 是    | 0     | 弧线圆心的x坐标值。 |
-  | y             | number  | 是    | 0     | 弧线圆心的y坐标值。 |
-  | radius        | number  | 是    | 0     | 弧线的圆半径。    |
-  | startAngle    | number  | 是    | 0     | 弧线的起始弧度。   |
-  | endAngle      | number  | 是    | 0     | 弧线的终止弧度。   |
-  | anticlockwise | boolean | 否    | false | 是否逆时针绘制圆弧。 |
-
-- 示例
-  ```
+**参数：**
+
+  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | 是 | 0 | 弧线圆心的x坐标值。 | 
+  | y | number | 是 | 0 | 弧线圆心的y坐标值。 | 
+  | radius | number | 是 | 0 | 弧线的圆半径。 | 
+  | startAngle | number | 是 | 0 | 弧线的起始弧度。 | 
+  | endAngle | number | 是 | 0 | 弧线的终止弧度。 | 
+  | counterclockwise | boolean | 否 | false | 是否逆时针绘制圆弧。 | 
+
+**示例：**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct Arc {
     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)
@@ -316,24 +337,27 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 依据圆弧经过的点和圆弧半径创建圆弧路径。
 
-- 参数
-  | 参数     | 类型     | 必填   | 默认值  | 描述              |
-  | ------ | ------ | ---- | ---- | --------------- |
-  | x1     | number | 是    | 0    | 圆弧经过的第一个点的x坐标值。 |
-  | y1     | number | 是    | 0    | 圆弧经过的第一个点的y坐标值。 |
-  | x2     | number | 是    | 0    | 圆弧经过的第二个点的x坐标值。 |
-  | y2     | number | 是    | 0    | 圆弧经过的第二个点的y坐标值。 |
-  | radius | number | 是    | 0    | 圆弧的圆半径值。        |
+**参数：**
 
-- 示例
-  ```
+  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x1 | number | 是 | 0 | 圆弧经过的第一个点的x坐标值。 | 
+  | y1 | number | 是 | 0 | 圆弧经过的第一个点的y坐标值。 | 
+  | x2 | number | 是 | 0 | 圆弧经过的第二个点的x坐标值。 | 
+  | y2 | number | 是 | 0 | 圆弧经过的第二个点的y坐标值。 | 
+  | radius | number | 是 | 0 | 圆弧的圆半径值。 | 
+
+**示例：**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct ArcTo {
     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)
@@ -356,31 +380,34 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
 
 ## ellipse
 
-ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, anticlockwise?: number): void
+ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number, startAngle: number, endAngle: number, counterclockwise?: number): void
 
 在规定的矩形区域绘制一个椭圆。
 
-- 参数
-  | 参数            | 类型     | 必填   | 默认值  | 描述                                   |
-  | ------------- | ------ | ---- | ---- | ------------------------------------ |
-  | x             | number | 是    | 0    | 椭圆圆心的x轴坐标。                           |
-  | y             | number | 是    | 0    | 椭圆圆心的y轴坐标。                           |
-  | radiusX       | number | 是    | 0    | 椭圆x轴的半径长度。                           |
-  | radiusY       | number | 是    | 0    | 椭圆y轴的半径长度。                           |
-  | rotation      | number | 是    | 0    | 椭圆的旋转角度，单位为弧度。                       |
-  | startAngle    | number | 是    | 0    | 椭圆绘制的起始点角度，以弧度表示。                    |
-  | endAngle      | number | 是    | 0    | 椭圆绘制的结束点角度，以弧度表示。                    |
-  | anticlockwise | number | 否    | 0    | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) |
-
-- 示例
-  ```
+**参数：**
+
+  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | 是 | 0 | 椭圆圆心的x轴坐标。 | 
+  | y | number | 是 | 0 | 椭圆圆心的y轴坐标。 | 
+  | radiusX | number | 是 | 0 | 椭圆x轴的半径长度。 | 
+  | radiusY | number | 是 | 0 | 椭圆y轴的半径长度。 | 
+  | rotation | number | 是 | 0 | 椭圆的旋转角度，单位为弧度。 | 
+  | startAngle | number | 是 | 0 | 椭圆绘制的起始点角度，以弧度表示。 | 
+  | endAngle | number | 是 | 0 | 椭圆绘制的结束点角度，以弧度表示。 | 
+  | counterclockwise | number | 否 | 0 | 是否以逆时针方向绘制椭圆，0为顺时针，1为逆时针。(可选参数，默认为0) | 
+
+**示例：**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
     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)
@@ -403,27 +430,30 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
 
 ## rect
 
-rect(x: number, y: number, width: number, height: number): void
+rect(x: number, y: number, w: number, h: number): void
 
 创建矩形路径。
 
-- 参数
-  | 参数     | 类型     | 必填   | 默认值  | 描述            |
-  | ------ | ------ | ---- | ---- | ------------- |
-  | x      | number | 是    | 0    | 指定矩形的左上角x坐标值。 |
-  | y      | number | 是    | 0    | 指定矩形的左上角y坐标值。 |
-  | width  | number | 是    | 0    | 指定矩形的宽度。      |
-  | height | number | 是    | 0    | 指定矩形的高度。      |
+**参数：**
 
-- 示例
-  ```
+  | 参数 | 类型 | 必填 | 默认值 | 描述 | 
+  | -------- | -------- | -------- | -------- | -------- |
+  | x | number | 是 | 0 | 指定矩形的左上角x坐标值。 | 
+  | y | number | 是 | 0 | 指定矩形的左上角y坐标值。 | 
+  | w | number | 是 | 0 | 指定矩形的宽度。 | 
+  | h | number | 是 | 0 | 指定矩形的高度。 | 
+
+**示例：**
+
+  ```ts
+  // xxx.ets
   @Entry
   @Component
   struct CanvasExample {
     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)