!13872 翻译完成 13549+13165

Merge pull request !13872 from ester.zhou/C1-0120

en/application-dev/reference/apis/js-apis-inputmethod.md

@@ -13,7 +13,7 @@ The **inputMethod** module provides an input method framework, which can be used
 import inputMethod from '@ohos.inputmethod';
 ```
 
-## Constants
+## Constants<sup>8+</sup>
 
 Provides the constants.
 
@@ -23,7 +23,7 @@ Provides the constants.
 | -------- | -------- | -------- | -------- |
 | MAX_TYPE_NUM | number | 128 | Maximum number of supported input methods.|
 
-## InputMethodProperty
+## InputMethodProperty<sup>8+</sup>
 
 Describes the input method application attributes.
 
@@ -56,7 +56,7 @@ Obtains an **[InputMethodController](#inputmethodcontroller)** instance.
 let inputMethodController = inputMethod.getInputMethodController();
 ```
 
-## inputMethod.getInputMethodSetting
+## inputMethod.getInputMethodSetting<sup>8+</sup>
 
 getInputMethodSetting(): InputMethodSetting
 
@@ -136,7 +136,7 @@ inputMethodController.stopInput().then((result) => {
 })
 ```
 
-## InputMethodSetting
+## InputMethodSetting<sup>8+</sup>
 
 In the following API examples, you must first use [getInputMethodSetting](#inputmethodgetinputmethodsetting) to obtain an **InputMethodSetting** instance, and then call the APIs using the obtained instance.
 
@@ -152,7 +152,7 @@ Obtains a list of installed input methods. This API uses an asynchronous callbac
 
 | Name  | Type                                              | Mandatory| Description                  |
 | -------- | -------------------------------------------------- | ---- | ---------------------- |
-| callback | AsyncCallback&lt;Array<[InputMethodProperty](#inputmethodproperty)>&gt; | Yes  | Callback used to return the list of installed input methods.|
+| callback | AsyncCallback&lt;Array<[InputMethodProperty](#inputmethodproperty8)>&gt; | Yes  | Callback used to return the list of installed input methods.|
 
 **Example**
 
@@ -166,7 +166,7 @@ inputMethodSetting.listInputMethod((err, data) => {
  });
 ```
 
-### listInputMethod
+### listInputMethod<sup>8+</sup>
 
 listInputMethod(): Promise&lt;Array&lt;InputMethodProperty&gt;&gt;
 
@@ -190,7 +190,7 @@ inputMethodSetting.listInputMethod().then((data) => {
 })
 ```
 
-### displayOptionalInputMethod
+### displayOptionalInputMethod<sup>8+</sup>
 
 displayOptionalInputMethod(callback: AsyncCallback&lt;void&gt;): void
 
@@ -216,7 +216,7 @@ inputMethodSetting.displayOptionalInputMethod((err) => {
 });
 ```
 
-### displayOptionalInputMethod
+### displayOptionalInputMethod<sup>8+</sup>
 
 displayOptionalInputMethod(): Promise&lt;void&gt;
 

en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md

 # OffscreenCanvasRenderingContext2D
 
+>  **NOTE**
+>
+>  The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
->**OffscreenCanvasRenderingContext2D**  is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
 
-Use  **OffscreenCanvasRenderingContext2D**  to draw rectangles, images, and texts on an  **OffscreenCanvas**.
+Use **OffscreenCanvasRenderingContext2D** to draw rectangles, images, and texts on an **OffscreenCanvas**.
+
 
 ## Attributes
 
-In addition to the attributes that are supported by  **CanvasRenderingContext2D**, the following attributes are supported.
-
-| Name   | Type   | Description                                                  |
-| ------ | ------ | ------------------------------------------------------------ |
-| filter | string | Image filter.<br>Available options are as follows:<br/> - **blur**: applies the Gaussian blur for the image.<br/> - **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br/> - **contrast**: adjusts the image contrast.<br/> - **drop-shadow**: sets a shadow effect for the image.<br/> - **grayscale**: converts the image to a grayscale image.<br/> - **hue-rotate**: applies hue rotation to the image.<br/> - **invert**: inverts the input image.<br/> - **opacity**: opacity of the converted image.<br/> - **saturate**: saturation of the converted image.<br/> - **sepia**: converts the image to dark brown. |
-
-
--   Example
-
-    ```
-    <!-- xxx.hml -->
-    <div style="width: 180px; height: 60px;">
-      <canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
-    </div>
-    ```
-
-    ```
-    //xxx.js
-    export default {
-      onShow(){
-        var ctx = this.$refs.canvasId.getContext('2d');
-        var offscreen = new OffscreenCanvas(360, 500);
-        var offCanvas2 = offscreen.getContext("2d");
-        var img = new Image();
-        img.src = 'common/images/flower.jpg';
-        offCanvas2.drawImage(img, 0, 0, 100, 100);
-        offCanvas2.filter = 'blur(5px)';
-        offCanvas2.drawImage(img, 100, 0, 100, 100);
-    
-        offCanvas2.filter = 'grayscale(50%)';
-        offCanvas2.drawImage(img, 200, 0, 100, 100);
-    
-        offCanvas2.filter = 'hue-rotate(90deg)';
-        offCanvas2.drawImage(img, 0, 100, 100, 100);
-    
-        offCanvas2.filter = 'invert(100%)';
-        offCanvas2.drawImage(img, 100, 100, 100, 100);
-    
-        offCanvas2.filter = 'drop-shadow(8px 8px 10px green)';
-        offCanvas2.drawImage(img, 200, 100, 100, 100);
-    
-        offCanvas2.filter = 'brightness(0.4)';
-        offCanvas2.drawImage(img, 0, 200, 100, 100);
-    
-        offCanvas2.filter = 'opacity(25%)';
-        offCanvas2.drawImage(img, 100, 200, 100, 100);
-    
-        offCanvas2.filter = 'saturate(30%)';
-        offCanvas2.drawImage(img, 200, 200, 100, 100);
-    
-        offCanvas2.filter = 'sepia(60%)';
-        offCanvas2.drawImage(img, 0, 300, 100, 100);
-    
-        offCanvas2.filter = 'contrast(200%)';
-        offCanvas2.drawImage(img, 100, 300, 100, 100);
-        var bitmap = offscreen.transferToImageBitmap();
-        ctx.transferFromImageBitmap(bitmap);
-      }
+In addition to the attributes that are supported by **CanvasRenderingContext2D**, the following attributes are supported.
+
+| Name    | Type    | Description                                      |
+| ------ | ------ | ---------------------------------------- |
+| filter | string | Image filter.<br>Available options are as follows:<br>- **blur**: applies the Gaussian blur for the image.<br>- **brightness**: applies a linear multiplication to the image to make it look brighter or darker.<br>- **contrast**: adjusts the image contrast.<br>- **drop-shadow**: sets a shadow effect for the image.<br>- **grayscale**: converts the image to a grayscale image.<br>- **hue-rotate**: applies hue rotation to the image.<br>- **invert**: inverts the image.<br>- **opacity**: sets the image opacity.<br>- **saturate**: sets the image saturation.<br>- **sepia**: converts the image to sepia.|
+
+**Example**
+  ```
+  <!-- xxx.hml -->
+  <div style="width: 180px; height: 60px;">
+    <canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
+  </div>
+  ```
+
+  ```
+  //xxx.js
+  export default {
+    onShow(){
+      var ctx = this.$refs.canvasId.getContext('2d');
+      var offscreen = new OffscreenCanvas(360, 500);
+      var offCanvas2 = offscreen.getContext("2d");
+      var img = new Image();
+      img.src = 'common/images/flower.jpg';
+      offCanvas2.drawImage(img, 0, 0, 100, 100);
+      offCanvas2.filter = 'blur(5px)';
+      offCanvas2.drawImage(img, 100, 0, 100, 100);
+  
+      offCanvas2.filter = 'grayscale(50%)';
+      offCanvas2.drawImage(img, 200, 0, 100, 100);
+  
+      offCanvas2.filter = 'hue-rotate(90deg)';
+      offCanvas2.drawImage(img, 0, 100, 100, 100);
+  
+      offCanvas2.filter = 'invert(100%)';
+      offCanvas2.drawImage(img, 100, 100, 100, 100);
+  
+      offCanvas2.filter = 'drop-shadow(8px 8px 10px green)';
+      offCanvas2.drawImage(img, 200, 100, 100, 100);
+  
+      offCanvas2.filter = 'brightness(0.4)';
+      offCanvas2.drawImage(img, 0, 200, 100, 100);
+  
+      offCanvas2.filter = 'opacity(25%)';
+      offCanvas2.drawImage(img, 100, 200, 100, 100);
+  
+      offCanvas2.filter = 'saturate(30%)';
+      offCanvas2.drawImage(img, 200, 200, 100, 100);
+  
+      offCanvas2.filter = 'sepia(60%)';
+      offCanvas2.drawImage(img, 0, 300, 100, 100);
+  
+      offCanvas2.filter = 'contrast(200%)';
+      offCanvas2.drawImage(img, 100, 300, 100, 100);
+      var bitmap = offscreen.transferToImageBitmap();
+      ctx.transferFromImageBitmap(bitmap);
     }
-    ```
-
-
+  }
+  ```
 
 ## Methods
 
-In addition to the attributes that are supported by  **CanvasRenderingContext2D**, the following attributes are supported.
+In addition to the methods that are supported by **CanvasRenderingContext2D**, the following methods are supported.
+
 
 ### isPointInPath
 
-isPointInPath\(path?: Path2D, x: number, y: number\): boolean
+isPointInPath(path?: Path2D, x: number, y: number): boolean
 
 Checks whether a specified point is in the path area.
 
-- Parameters
-
-  | Name | Type   | Mandatory | Description                                                  |
-  | ---- | ------ | --------- | ------------------------------------------------------------ |
-  | path | Path2D | No        | Path used for checking. If this parameter is not set, the current path is used. |
-  | x    | number | Yes       | X-coordinate of the point used for checking.                 |
-  | y    | number | Yes       | Y-coordinate of the point used for checking.                 |
-
-- Return values
-
-  | Type    | Description                                    |
-  | ------- | ---------------------------------------------- |
-  | boolean | Whether a specified point is in the path area. |
-
--   Example
-
-    ```
-    <!-- xxx.hml -->
-    <div style="width: 180px; height: 60px;">
-      <text>In path:{{textValue}}</text>
-      <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
-    </div>
-    ```
-
-    ```
-    // xxx.js
-    export default {
-      data: {
-        textValue: 0
-      },
-      onShow(){
-        var canvas = this.$refs.canvas.getContext('2d');
-        var offscreen = new OffscreenCanvas(500,500);
-        var offscreenCanvasCtx = offscreen.getContext("2d");
-    
-        offscreenCanvasCtx.rect(10, 10, 100, 100);
-        offscreenCanvasCtx.fill();
-        this.textValue = offscreenCanvasCtx.isPointInPath(30, 70);
-    
-        var bitmap = offscreen.transferToImageBitmap();
-        canvas.transferFromImageBitmap(bitmap);
-      }
+**Parameters**
+| Name | Type  | Mandatory  | Description                           |
+| ---- | ------ | ---- | ----------------------------- |
+| path | Path2D | No   | Path used for checking. If this parameter is not set, the current path is used.|
+| x    | number | Yes   | X-coordinate of the point used for checking.                   |
+| y    | number | Yes   | Y-coordinate of the point used for checking.                   |
+
+**Return value**
+| Type     | Description           |
+| ------- | ------------- |
+| boolean | Whether a specified point is in the path area.|
+
+**Example**
+  ```
+  <!-- xxx.hml -->
+  <div style="width: 180px; height: 60px;">
+    <text>In path:{{textValue}}</text>
+    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
+  </div>
+  ```
+
+  ```
+  // xxx.js
+  export default {
+    data: {
+      textValue: 0
+    },
+    onShow(){
+      var canvas = this.$refs.canvas.getContext('2d');
+      var offscreen = new OffscreenCanvas(500,500);
+      var offscreenCanvasCtx = offscreen.getContext("2d");
+  
+      offscreenCanvasCtx.rect(10, 10, 100, 100);
+      offscreenCanvasCtx.fill();
+      this.textValue = offscreenCanvasCtx.isPointInPath(30, 70);
+  
+      var bitmap = offscreen.transferToImageBitmap();
+      canvas.transferFromImageBitmap(bitmap);
     }
-    ```
-
-    ![](figures/en-us_image_0000001224354967.png)
+  }
+  ```
 
+![en-us_image_0000001224354967](figures/en-us_image_0000001224354967.png)
 
 ### isPointInStroke
 
-isPointInStroke\(path?: Path2D, x: number, y: number\): boolean
+isPointInStroke(path?: Path2D, x: number, y: number): boolean
 
 Checks whether a specified point is on the edge line of a path.
 
--   Parameters
-
-    | Name | Type   | Mandatory | Description                                                  |
-    | ---- | ------ | --------- | ------------------------------------------------------------ |
-    | path | Path2D | No        | Path used for checking. If this parameter is not set, the current path is used. |
-    | x    | number | Yes       | X-coordinate of the point used for checking.                 |
-    | y    | number | Yes       | Y-coordinate of the point used for checking.                 |
-    
--   Return values
-
-    | Type    | Description                                    |
-    | ------- | ---------------------------------------------- |
-    | boolean | Whether a specified point is in the path area. |
-    
--   Example
-
-    ```
-    <!-- xxx.hml -->
-    <div style="width: 180px; height: 60px;">
-      <text>In path:{{textValue}}</text>
-      <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
-    </div>
-    ```
-
-    ```
-    // xxx.js
-    export default {
-      data: {
-        textValue: 0
-      },
-      onShow(){
-        var canvas = this.$refs.canvas.getContext('2d');
-        var offscreen = new OffscreenCanvas(500,500);
-        var offscreenCanvasCtx = offscreen.getContext("2d");
-    
-        offscreenCanvasCtx.rect(10, 10, 100, 100);
-        offscreenCanvasCtx.stroke();
-        this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10);
-    
-        var bitmap = offscreen.transferToImageBitmap();
-        canvas.transferFromImageBitmap(bitmap);
-      }
+**Parameters**
+| Name | Type  | Mandatory  | Description                           |
+| ---- | ------ | ---- | ----------------------------- |
+| path | Path2D | No   | Path used for checking. If this parameter is not set, the current path is used.|
+| x    | number | Yes   | X-coordinate of the point used for checking.                   |
+| y    | number | Yes   | Y-coordinate of the point used for checking.                   |
+
+**Return value**
+| Type     | Description           |
+| ------- | ------------- |
+| boolean | Whether a specified point is in the path area.|
+
+**Example**
+  ```
+  <!-- xxx.hml -->
+  <div style="width: 180px; height: 60px;">
+    <text>In path:{{textValue}}</text>
+    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
+  </div>
+  ```
+
+  ```
+  // xxx.js
+  export default {
+    data: {
+      textValue: 0
+    },
+    onShow(){
+      var canvas = this.$refs.canvas.getContext('2d');
+      var offscreen = new OffscreenCanvas(500,500);
+      var offscreenCanvasCtx = offscreen.getContext("2d");
+  
+      offscreenCanvasCtx.rect(10, 10, 100, 100);
+      offscreenCanvasCtx.stroke();
+      this.textValue = offscreenCanvasCtx.isPointInStroke(50, 10);
+  
+      var bitmap = offscreen.transferToImageBitmap();
+      canvas.transferFromImageBitmap(bitmap);
     }
-    ```
-
-    ![](figures/en-us_image_0000001178875308.png)
+  }
+  ```
 
+![en-us_image_0000001178875308](figures/en-us_image_0000001178875308.png)
 
 ### resetTransform
 
-resetTransform\(\): void
-
--   Example
-
-    ```
-    <!-- xxx.hml -->
-    <div style="width: 180px; height: 60px;">
-      <text>In path:{{textValue}}</text>
-      <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
-    </div>
-    ```
-
-    ```
-    //xxx.js
-    export default {
-      data:{
-       textValue:0
-      },
-      onShow(){
-       var canvas = this.$refs.canvas.getContext('2d');
-       var offscreen = new OffscreenCanvas(500,500);
-       var offscreenCanvasCtx = offscreen.getContext("2d");
-    
-       offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
-       offscreenCanvasCtx.fillStyle = 'gray';
-       offscreenCanvasCtx.fillRect(40, 40, 50, 20);
-       offscreenCanvasCtx.fillRect(40, 90, 50, 20);
-    
-       // Non-skewed rectangles
-       offscreenCanvasCtx.resetTransform();
-       offscreenCanvasCtx.fillStyle = 'red';
-       offscreenCanvasCtx.fillRect(40, 40, 50, 20);
-       offscreenCanvasCtx.fillRect(40, 90, 50, 20);
-    
-       var bitmap = offscreen.transferToImageBitmap();
-       canvas.transferFromImageBitmap(bitmap);
-      } 
-    }
-    ```
-
-    ![](figures/en-us_image_0000001179035242.png)
-
+resetTransform(): void
+
+**Example**
+  ```
+  <!-- xxx.hml -->
+  <div style="width: 180px; height: 60px;">
+    <text>In path:{{textValue}}</text>
+    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
+  </div>
+  ```
+
+  ```
+  //xxx.js
+  export default {
+    data:{
+     textValue:0
+    },
+    onShow(){
+     var canvas = this.$refs.canvas.getContext('2d');
+     var offscreen = new OffscreenCanvas(500,500);
+     var offscreenCanvasCtx = offscreen.getContext("2d");
+  
+     offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0);
+     offscreenCanvasCtx.fillStyle = '#a9a9a9';
+     offscreenCanvasCtx.fillRect(40, 40, 50, 20);
+     offscreenCanvasCtx.fillRect(40, 90, 50, 20);
+  
+     // Non-skewed rectangles
+     offscreenCanvasCtx.resetTransform();
+     offscreenCanvasCtx.fillStyle = '#ff0000';
+     offscreenCanvasCtx.fillRect(40, 40, 50, 20);
+     offscreenCanvasCtx.fillRect(40, 90, 50, 20);
+  
+     var bitmap = offscreen.transferToImageBitmap();
+     canvas.transferFromImageBitmap(bitmap);
+    } 
+  }
+  ```
+
+![en-us_image_0000001179035242](figures/en-us_image_0000001179035242.png)

en/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

@@ -428,7 +428,7 @@ struct LineDashOffset {
           this.context.arc(100, 75, 50, 0, 6.28)
           this.context.setLineDash([10,20])
           this.context.lineDashOffset = 10.0
-          this.context.stroke()
+          this.context.stroke();
       })
     }
     .width('100%')
@@ -721,8 +721,8 @@ Draws an outlined rectangle on the canvas.
   @Entry
   @Component
   struct StrokeRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private settings: RenderingContextSettings = new RenderingContextSettings(true);
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -802,8 +802,6 @@ Draws filled text on the canvas.
 | text     | string | Yes  | ''     | Text to draw.         |
 | x        | number | Yes  | 0      | X-coordinate of the lower left corner of the text.|
 | y        | number | Yes  | 0      | Y-coordinate of the lower left corner of the text.|
-| maxWidth | number | No  | -      | Maximum width allowed for the text.     |
-
 **Example**
 
   ```ts
@@ -1583,7 +1581,7 @@ struct Fill {
           region.lineTo(270, 90)
           region.closePath()
           // Fill path
-          this.context.fillStyle = 'green'
+          this.context.fillStyle = '#00ff00'
           this.context.fill(region, "evenodd")
         })
     }
@@ -2269,7 +2267,7 @@ struct CanvasGetLineDash {
           .onReady(() => {
             this.context.arc(100, 75, 50, 0, 6.28)
             this.context.setLineDash([10,20])
-            this.context.stroke()
+            this.context.stroke();
             let res = this.context.getLineDash()
           })
       }
@@ -2408,7 +2406,8 @@ Restores the saved drawing context.
   struct CanvasExample {
     private settings: RenderingContextSettings = new RenderingContextSettings(true)
     private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
+    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+  
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
         Canvas(this.context)
@@ -2417,7 +2416,7 @@ Restores the saved drawing context.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.context.save() // save the default state
-            this.context.fillStyle = "green"
+            this.context.fillStyle = "#00ff00"
             this.context.fillRect(20, 20, 100, 100)
             this.context.restore() // restore to the default state
             this.context.fillRect(150, 75, 100, 100)
@@ -2455,7 +2454,7 @@ Saves all states of the canvas in the stack. This API is usually called when the
           .backgroundColor('#ffff00')
           .onReady(() =>{
             this.context.save() // save the default state
-            this.context.fillStyle = "green"
+            this.context.fillStyle = "#00ff00"
             this.context.fillRect(20, 20, 100, 100)
             this.context.restore() // restore to the default state
             this.context.fillRect(150, 75, 100, 100)
@@ -2502,9 +2501,9 @@ Creates a linear gradient.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.context.createLinearGradient(50,0, 300,100)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.context.fillStyle = grad
             this.context.fillRect(0, 0, 500, 500)
           })
@@ -2553,9 +2552,9 @@ Creates a linear gradient.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.context.fillStyle = grad
             this.context.fillRect(0, 0, 500, 500)
           })

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

@@ -17,10 +17,10 @@ Adds a color stop for the **CanvasGradient** object based on the specified offse
 
 **Parameters**
 
-  | Name    | Type    | Mandatory  | Default Value      | Description                          |
-  | ------ | ------ | ---- | --------- | ---------------------------- |
-  | offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
-  | color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
+| Name    | Type    | Mandatory  | Default Value      | Description                          |
+| ------ | ------ | ---- | --------- | ---------------------------- |
+| offset | number | Yes   | 0         | Relative position of the gradient stop along the gradient vector. The value ranges from 0 to 1.|
+| color  | string | Yes   | '#ffffff' | Gradient color to set.                    |
 
 
 **Example**
@@ -41,9 +41,9 @@ struct Page45 {
         .backgroundColor('#ffff00')
         .onReady(() => {
           var grad = this.context.createLinearGradient(50, 0, 300, 100)
-          grad.addColorStop(0.0, 'red')
-          grad.addColorStop(0.5, 'white')
-          grad.addColorStop(1.0, 'green')
+          grad.addColorStop(0.0, '#ff0000')
+          grad.addColorStop(0.5, '#ffffff')
+          grad.addColorStop(1.0, '#00ff00')
           this.context.fillStyle = grad
           this.context.fillRect(0, 0, 500, 500)
         })

en/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md

@@ -182,7 +182,7 @@ struct LineCapExample {
 }
 ```
 
-![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.PNG)
+![en-us_image_0000001194192454](figures/en-us_image_0000001194192454.png)
 
 
 ### lineJoin
@@ -2625,9 +2625,9 @@ Creates a linear gradient.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.offContext.createLinearGradient(50,0, 300,100)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.offContext.fillStyle = grad
             this.offContext.fillRect(0, 0, 500, 500)
             var image = this.offContext.transferToImageBitmap()
@@ -2679,9 +2679,9 @@ Creates a linear gradient.
           .backgroundColor('#ffff00')
           .onReady(() =>{
             var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
+            grad.addColorStop(0.0, '#ff0000')
+            grad.addColorStop(0.5, '#ffffff')
+            grad.addColorStop(1.0, '#00ff00')
             this.offContext.fillStyle = grad
             this.offContext.fillRect(0, 0, 500, 500)
             var image = this.offContext.transferToImageBitmap()