!15505 【3.1-Release】翻译完成 14837：Canvas js文档整改

Merge pull request !15505 from ester.zhou/C01-14837

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

@@ -17,16 +17,16 @@ In addition to the attributes that are supported by **CanvasRenderingContext2D**
 | 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;">
+```
+<!-- xxx.hml -->
+<div style="width: 180px; height: 60px;">
   <canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
-  </div>
-  ```
+</div>
+```
 
-  ```
-  //xxx.js
-  export default {
+```
+// xxx.js
+export default {
   onShow(){
     var ctx = this.$refs.canvasId.getContext('2d');
     var offscreen = new OffscreenCanvas(360, 500);
@@ -66,8 +66,8 @@ In addition to the attributes that are supported by **CanvasRenderingContext2D**
     var bitmap = offscreen.transferToImageBitmap();
     ctx.transferFromImageBitmap(bitmap);
   }
-  }
-  ```
+}
+```
 
 ## Methods
 
@@ -93,17 +93,41 @@ Checks whether a specified point is in the path area.
 | boolean | Whether a specified point is in the path area.|
 
 **Example**
-  ```
-  <!-- xxx.hml -->
-  <div style="width: 180px; height: 60px;">
-    <text>In path:{{textValue}}</text>
+```
+<!-- xxx.hml -->
+<div class="container" style="width: 500px; height: 500px;">
+    <text class="textsize">In path:{{textValue}}</text>
     <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
-  </div>
-  ```
-
-  ```
-  // xxx.js
-  export default {
+</div>
+```
+
+```
+/* xxx.css */
+.container {
+    display: flex;
+    flex-direction: column;
+    background-color: #F1F3F5;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+canvas {
+    width: 600px;
+    height: 600px;
+    background-color: #fdfdfd;
+    border: none;
+}
+
+.textsize {
+    font-size: 40px;
+}
+```
+
+```
+// xxx.js
+export default {
   data: {
     textValue: 0
   },
@@ -119,8 +143,8 @@ Checks whether a specified point is in the path area.
     var bitmap = offscreen.transferToImageBitmap();
     canvas.transferFromImageBitmap(bitmap);
   }
-  }
-  ```
+}
+```
 
 ![en-us_image_0000001224354967](figures/en-us_image_0000001224354967.png)
 
@@ -143,17 +167,41 @@ Checks whether a specified point is on the edge line of a path.
 | boolean | Whether a specified point is in the path area.|
 
 **Example**
-  ```
-  <!-- xxx.hml -->
-  <div style="width: 180px; height: 60px;">
-    <text>In path:{{textValue}}</text>
+```
+<!-- xxx.hml -->
+<div class="container" style="width: 500px; height: 500px;">
+    <text class="textsize">In stroke:{{textValue}}</text>
     <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
-  </div>
-  ```
-
-  ```
-  // xxx.js
-  export default {
+</div>
+```
+
+```
+/* xxx.css */
+.container {
+    display: flex;
+    flex-direction: column;
+    background-color: #F1F3F5;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+canvas {
+    width: 600px;
+    height: 600px;
+    background-color: #fdfdfd;
+    border: none;
+}
+
+.textsize {
+    font-size: 40px;
+}
+```
+
+```
+// xxx.js
+export default {
   data: {
     textValue: 0
   },
@@ -169,8 +217,8 @@ Checks whether a specified point is on the edge line of a path.
     var bitmap = offscreen.transferToImageBitmap();
     canvas.transferFromImageBitmap(bitmap);
   }
-  }
-  ```
+}
+```
 
 ![en-us_image_0000001178875308](figures/en-us_image_0000001178875308.png)
 
@@ -179,17 +227,41 @@ Checks whether a specified point is on the edge line of a path.
 resetTransform(): void
 
 **Example**
-  ```
-  <!-- xxx.hml -->
-  <div style="width: 180px; height: 60px;">
-    <text>In path:{{textValue}}</text>
+```
+<!-- xxx.hml -->
+<div class="container" style="width: 500px; height: 500px;">
+    <text class="textsize">In path:{{textValue}}</text>
     <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
-  </div>
-  ```
-
-  ```
-  //xxx.js
-  export default {
+</div>
+```
+
+```
+/* xxx.css */
+.container {
+    display: flex;
+    flex-direction: column;
+    background-color: #F1F3F5;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+}
+
+canvas {
+    width: 600px;
+    height: 600px;
+    background-color: #fdfdfd;
+    border: none;
+}
+
+.textsize {
+    font-size: 40px;
+}
+```
+
+```
+// xxx.js
+export default {
   data:{
    textValue:0
   },
@@ -212,7 +284,7 @@ resetTransform(): void
    var bitmap = offscreen.transferToImageBitmap();
    canvas.transferFromImageBitmap(bitmap);
   } 
-  }
-  ```
+}
+```
 
 ![en-us_image_0000001179035242](figures/en-us_image_0000001179035242.png)

en/application-dev/ui/ui-js-components-path2d.md

@@ -56,7 +56,7 @@ export default {
     path.closePath();
     // Door
     path.moveTo(250, 450);
-    path.rect(250, 450, 350, 600);
+    path.rect(250, 450, 100, 600);
     path.closePath();
     // Chimney
     path.moveTo(365, 250);