!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,57 +17,57 @@ 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;">
-    <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);
-    }
+```
+<!-- 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
 
@@ -93,34 +93,58 @@ 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 {
-    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);
-    }
+</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
+  },
+  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);
   }
-  ```
+}
+```
 
 ![en-us_image_0000001224354967](figures/en-us_image_0000001224354967.png)
 
@@ -143,34 +167,58 @@ 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 {
-    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);
-    }
+</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
+  },
+  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);
   }
-  ```
+}
+```
 
 ![en-us_image_0000001178875308](figures/en-us_image_0000001178875308.png)
 
@@ -179,40 +227,64 @@ 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 {
-    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);
-    } 
-  }
-  ```
+</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
+  },
+  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/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);