diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index 35211ab1665ca4dbee56199a3c449ae9ff2a8a0b..8801033ff3864cef03d0271db00a8d1dfb92d3da 100644
--- a/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
@@ -22,7 +22,7 @@ Since API version 9, this API is supported in ArkTS widgets.
| 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. |
+| color | string | Yes | '#ffffff' | Gradient color to set. For details about the color notation, see the description of the string type in [ResourceColor](ts-types.md#resourcecolor). |
**Example**
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
index 001cc3473099f87b794b39aa398aeedcc4878bfe..8032455b78bf4a4e5654dfc939f23cfbdeafc2e3 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-gradient-color.md
@@ -13,8 +13,8 @@ Create a more gorgeous look for a component by applying a gradient color effect
| Name | Type | Description |
| -------------- | -------------------------------------------- | ----------------------------------- |
| linearGradient | {
angle?: number \| string,
direction?: [GradientDirection](ts-appendix-enums.md#gradientdirection),
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Linear gradient.
- **angle**: start angle of the linear gradient. A positive value indicates a clockwise rotation from the origin, (0, 0).
Default value: **180**
- **direction**: direction of the linear gradient. It does not take effect when **angle** is set.
Default value: **GradientDirection.Bottom**
- **colors**: colors of the linear gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.|
-| sweepGradient | {
center: Point,
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.
- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the sweep gradient.
Default value: **0**
- **end**: end point of the sweep gradient.
Default value: **0**
- **rotation**: rotation angle of the sweep gradient.
Default value: **0**
- **colors**: colors of the sweep gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.
When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.|
-| radialGradient | {
center: Point,
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the value **0**.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.|
+| sweepGradient | {
center: [Point](./ts-drawing-components-polygon.md#point),
start?: number \| string,
end?: number \| string,
rotation?: number\|string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Sweep gradient, which can sweep around the specified center point in the 0–360 degree range. If the rotation angle exceeds the range, a monochrome color instead of a gradient will be drawn.
- **center**: center point of the sweep gradient, that is, the coordinates relative to the upper left corner of the current component.
- **start**: start point of the sweep gradient.
Default value: **0**
- **end**: end point of the sweep gradient.
Default value: **0**
- **rotation**: rotation angle of the sweep gradient.
Default value: **0**
- **colors**: colors of the sweep gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.
**NOTE**
A value less than 0 evaluates to the value **0**. A value greater than 360 evaluates to the value **1**.
When the data type of **start**, **end**, and **rotation** is string, the value **"90"** or **"90%"** is equivalent to **90**.|
+| radialGradient | {
center: [Point](./ts-drawing-components-polygon.md#point),
radius: number \| string,
colors: Array<[ColorStop](ts-basic-components-gauge.md#colorstop)>,
repeating?: boolean
} | Radial gradient.
- **center**: center point of the radial gradient, that is, the coordinates relative to the upper left corner of the current component.
- **radius**: radius of the radial gradient.
Value range: [0, +∞)
**NOTE**
A value less than 0 evaluates to the value **0**.
- **colors**: colors of the radial gradient.
- **repeating**: whether the colors are repeated.
Default value: **false**
Since API version 9, this API is supported in ArkTS widgets.|
## Example
diff --git a/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md b/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
index fbfe2c4db91511503d37bba3ad2100a912aee020..2c338d915e21c6a66ba684824739914c86966ff8 100644
--- a/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
+++ b/en/application-dev/reference/js-service-widget-ui/js-service-widget-common-gradient.md
@@ -33,54 +33,52 @@ background: repeating-linear-gradient(direction/angle, color, color, ...);
The color can be specified in any of the following formats: \#ff0000, \#ffff0000, rgb(255, 0, 0), and rgba(255, 0, 0, 1). At least two colors must be specified.
-- Parameters
+**Parameters**
- | Name | Type | Default Value | Mandatory | Description |
- | --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
- | direction | to <side-or-corner> <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).|
- | angle | <deg> | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
- | color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. |
+| Name | Type | Default Value | Mandatory | Description |
+| --------- | ---------------------------------------- | ---------------------------- | ---- | ---------------------------------------- |
+| direction | to <side-or-corner> <side-or-corner> = [left \| right] \|\| [top \| bottom] | to bottom (gradient from top to bottom)| No | Transition direction. For example, **to left** (gradient from right to left) or **to bottom right** (gradient from upper left corner to lower right corner).|
+| angle | <deg> | 180deg | No | Transition direction, which is the angle between the gradient line and the y-axis (in the clockwise direction), with the geometric center of the element being the origin of coordinates and the horizontal axis being the x-axis.|
+| color | <color> [<length>\|<percentage>] | - | Yes | Colors among which smooth transitions are rendered. |
-- Example
+**Example**
- 1. Gradient from top to bottom (default)
+1. Gradient from top to bottom (default)
- ```css
- #gradient {
- height: 300px;
- width: 600px;
- /* Gradient starts from red at the top to green at the bottom. */
- background: linear-gradient(red, #00ff00);
- }
- ```
+ ```css
+ #gradient {
+ height: 300px;
+ width: 600px;
+ /* Gradient starts from red at the top to green at the bottom. */
+ background: linear-gradient(red, #00ff00);
+ }
+ ```
- 
+ 
- 2. Gradient at an angle of 45°
+2. Gradient at an angle of 45°
+ ```css
+ /* Gradient at an angle of 45°, changing from red to green */
+ background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
+ ```
- ```css
- /* Gradient at an angle of 45°, changing from red to green */
- background: linear-gradient(45deg, rgb(255, 0, 0),rgb(0, 255, 0));
- ```
+ 
- 
+3. Gradient from left to right
- 3. Gradient from left to right
+ ```css
+ /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */
+ background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
+ ```
- ```css
- /* Gradient from left to right, which is available in the 270 px width between the left 90 px and the left 360 px (600*0.6) */
- background: linear-gradient(to right, rgb(255, 0, 0) 90px, rgb(0, 255, 0) 60%);
- ```
+ 
+4. Repeating gradient
- 
+ ```css
+ /* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */
+ background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
+ ```
- 4. Repeating gradient
-
- ```css
- /* Repeating gradient from left to right, the area of which is 30 px (60 – 30) and the opacity is 0.5 */
- background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30vp,rgba(0, 0, 255, .5) 60vp);
- ```
-
- 
+ 
diff --git a/en/application-dev/ui/arkts-common-components-xcomponent.md b/en/application-dev/ui/arkts-common-components-xcomponent.md
index 76e00753ef0ec0fe6f9212dddc503eabb426b055..b6bdb5633f2275fda550f7ae2c6c7f75ed420d0f 100644
--- a/en/application-dev/ui/arkts-common-components-xcomponent.md
+++ b/en/application-dev/ui/arkts-common-components-xcomponent.md
@@ -107,7 +107,7 @@ extern "C" __attribute__((constructor)) void RegisterModule(void)
### Parsing the NativeXComponent Instance
-**NativeXComponent** provides an instance at the native layer for the **\**, which can be used as a bridge for binding with the **\** at the JS layer. The NDK APIs provided by the **\** depend on this instance. For details about the NKD APIs, see [Native XComponent](../reference/native-apis/_o_h___native_x_component.md).
+**NativeXComponent** provides an instance at the native layer for the **\**, which can be used as a bridge for binding with the **\** at the JS layer. The NDK APIs provided by the **\** depend on this instance. For details about the NDK APIs, see [Native XComponent](../reference/native-apis/_o_h___native_x_component.md).
The **NativeXComponent** instance can be obtained by parsing the callback (that is, the **Init** function in [NAPI module registration](#registering-the-n-api-module)) when the module is loaded.
@@ -189,30 +189,33 @@ XComponent({ id: 'xcomponentId1', type: 'surface', libraryname: 'nativerender' }
- **id**: corresponds to an **\** and must be unique. Generally, you can use the **OH_NativeXComponent_GetXComponentId** API on the native side to obtain the corresponding ID and bind the corresponding **\**.
- **libraryname**: name of the loaded module, which must be the same as the value of **nm_modname** used when the Napi module is registered on the native side.
- >**NOTE**
- >
- > An application loads modules to implement cross-language invoking in either of the following ways:
+
+ > **NOTE**
>
+ > An application loads modules to implement cross-language invoking in either of the following modes:
+ >
> 1. Use the **import** mode of the NAPI.
>
- > ```ts
- > import nativerender from "libnativerender.so"
- > ```
+ > ```ts
+ > import nativerender from "libnativerender.so"
+ > ```
>
- > 2. Use the **\**, which, in essence, is to use the NAPI mechanism.
- > The difference between this loading mode and the **import** loading mode is that when the dynamic library is loaded, the **NativeXComponent** instance of the **\** is exposed to the native layer of the application so that you can use the NDK APIs of the **\**.
+ > 2. Use the **\**.
+ >
+ > While this mode also uses the NAPI mechanism as the **import** mode, it enables you to use the NDK APIs of the **\**, by having the **NativeXComponent** instance of the **\** exposed to the native layer of the application when the dynamic library is loaded.
-- onLoad event
+- **onLoad** event
- Trigger time: when the surface of the **\** is prepared.
- **context** parameter: where the native API exposed on the module is mounted. Its usage is similar to the usage of the **context2** instance obtained after the module is directly loaded using **import context2 from "libnativerender.so"**.
- Time sequence: When the **onLoad** event is subject to the surface. The following figure shows the time sequence of the **onLoad** event and the **OnSurfaceCreated** event on the native side.
- 
+ 
+
+- **onDestroy** event
-- onDestroy event
Trigger time: when the **\** is destroyed, in the same manner as that when an ArkUI component is destroyed. The following figure shows the time sequence of the **onDestroy** event and the **OnSurfaceDestroyed** event on the native side.
- 
+ 
### Writing Media Data
@@ -221,7 +224,7 @@ The surface held by the **\** complies with the producer-consumer mo
In OpenHarmony, components that comply with the producer design, such as the camera and video player, can write data to the surface held by the **\** and display the data through the **\**.
-
+
You can bind the **\** to the **XComponentController** to obtain the surface ID (**surfaceId**, which uniquely identifies a surface) and send it to the corresponding component API.
diff --git a/en/application-dev/ui/figures/Picture 1.png b/en/application-dev/ui/figures/picture-1.png
similarity index 100%
rename from en/application-dev/ui/figures/Picture 1.png
rename to en/application-dev/ui/figures/picture-1.png