Update docs (16446)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>

en/application-dev/reference/arkui-ts/ts-drawing-components-circle.md

@@ -37,10 +37,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | strokeDashArray | Array&lt;Length&gt; | Stroke dashes.<br>Default value: **[]**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | strokeDashOffset | number \| string  | Offset of the start point for drawing the stroke.<br>Default value: **0**<br>Since API version 9, this API is supported in ArkTS widgets.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**<br>Since API version 9, this API is supported in ArkTS widgets.|
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not work for the **\<circle>** component, which does not have corners.|
 | strokeMiterLimit | number \| string | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>Default value: **4**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not take effect for the **\<Circle>** component, because it does not have a miter join.|
 | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| Stroke opacity.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
-| strokeWidth | Length | Stroke width.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.|
+| strokeWidth | Length | Stroke width.<br>Default value: **1**<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The value cannot be a percentage.|
 | antiAlias | boolean | Whether anti-aliasing is enabled.<br>Default value: **true**<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 

en/application-dev/reference/arkui-ts/ts-drawing-components-ellipse.md

@@ -37,10 +37,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not work for the **\<ellipse>** component, which does not have corners.|
 | strokeMiterLimit | number \| string | 4 | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not take effect for the **\<Ellipse>** component, because it does not have a miter join.|
 | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
-| strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The value cannot be a percentage.|
 | antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 

en/application-dev/reference/arkui-ts/ts-drawing-components-line.md

@@ -39,10 +39,10 @@ In addition to the [universal attributes](ts-universal-attributes-size.md), the
 | strokeDashArray | Array&lt;Length&gt; | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
 | strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
-| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not work for the **\<Line>** component, which does not have corners. |
 | strokeMiterLimit | number \| string | 4 | Limit value when the sharp angle is drawn as a miter.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>This attribute does not take effect because the **\<Line>** component cannot be used to draw a shape with a sharp angle.|
 | strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.|
-| strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.|
+| strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.<br>**NOTE**<br>The value cannot be a percentage.|
 | antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.|
 
 ## Example
@@ -58,35 +58,41 @@ struct LineExample {
     Column({ space: 10 }) {
       // The coordinates of the start and end points of the line are determined relative to the coordinates of the drawing area of the <Line> component.
       Line()
+        .width(200)
+        .height(150)
         .startPoint([0, 0])
         .endPoint([50, 100])
         .stroke(Color.Black)
         .backgroundColor('#F5F5F5')
       Line()
         .width(200)
-        .height(200)
+        .height(150)
         .startPoint([50, 50])
         .endPoint([150, 150])
         .strokeWidth(5)
         .stroke(Color.Orange)
         .strokeOpacity(0.5)
         .backgroundColor('#F5F5F5')
-      // If the coordinates of a point are beyond the width and height range of the <Line> component, the line will exceed the drawing area.
-      Line({ width: 50, height: 50 })
+      // strokeDashOffset is used to define the offset when the associated strokeDashArray array is rendered.
+      Line()
+        .width(200)
+        .height(150)
         .startPoint([0, 0])
         .endPoint([100, 100])
         .stroke(Color.Black)
         .strokeWidth(3)
         .strokeDashArray([10, 3])
+        .strokeDashOffset(5)
         .backgroundColor('#F5F5F5')
-      // strokeDashOffset is used to define the offset when the associated strokeDashArray array is rendered.
-      Line({ width: 50, height: 50 })
+      // If the coordinates of a point are beyond the width and height range of the <Line> component, the line will exceed the drawing area.
+      Line()
+        .width(50)
+        .height(50)
         .startPoint([0, 0])
         .endPoint([100, 100])
         .stroke(Color.Black)
         .strokeWidth(3)
         .strokeDashArray([10, 3])
-        .strokeDashOffset(5)
         .backgroundColor('#F5F5F5')
     }
   }
@@ -151,12 +157,16 @@ struct LineExample {
   build() {
     Column() {
       Line()
+        .width(300)
+        .height(30)
         .startPoint([50, 30])
         .endPoint([300, 30])
         .stroke(Color.Black)
         .strokeWidth(10)
       // Set the interval for strokeDashArray to 50.
       Line()
+        .width(300)
+        .height(30)
         .startPoint([50, 20])
         .endPoint([300, 20])
         .stroke(Color.Black)
@@ -164,6 +174,8 @@ struct LineExample {
         .strokeDashArray([50])
       // Set the interval for strokeDashArray to 50, 10.
       Line()
+        .width(300)
+        .height(30)
         .startPoint([50, 20])
         .endPoint([300, 20])
         .stroke(Color.Black)
@@ -171,6 +183,8 @@ struct LineExample {
         .strokeDashArray([50, 10])
       // Set the interval for strokeDashArray to 50, 10, 20.
       Line()
+        .width(300)
+        .height(30)
         .startPoint([50, 20])
         .endPoint([300, 20])
         .stroke(Color.Black)
@@ -178,6 +192,8 @@ struct LineExample {
         .strokeDashArray([50, 10, 20])
       // Set the interval for strokeDashArray to 50, 10, 20, 30.
       Line()
+        .width(300)
+        .height(30)
         .startPoint([50, 20])
         .endPoint([300, 20])
         .stroke(Color.Black)