!11340 canvas js文档整改

Merge pull request !11340 from lanyi/pr_11283

zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasgradient.md

@@ -25,19 +25,21 @@ addColorStop(offset: number, color: string): void
 <!-- xxx.hml -->
 <div>
   <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
-  <input type="button" style="width: 180px; height: 60px;" value="fillStyle"onclick="handleClick" />
 </div>
   ```
 
   ```js
 // xxx.js
 export default {
-  handleClick() {
+  onShow() {
     const el =this.$refs.canvas;
-    const ctx =el.getContext('2d');
-    const gradient = ctx.createLinearGradient(0,0,100,0);
-    gradient.addColorStop(0,'#00ffff');
-    gradient.addColorStop(1,'#ffff00');
+    const ctx = el.getContext('2d');
+    const gradient = ctx.createLinearGradient(50,0,300,100);
+    gradient.addColorStop(0.0, 'red')
+    gradient.addColorStop(0.5, 'white')
+    gradient.addColorStop(1.0, 'green')
+    ctx.fillStyle = gradient
+    ctx.fillRect(0, 0, 300, 300)
   }
 }
   ```

zh-cn/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md

@@ -584,7 +584,7 @@ fillRect(x: number, y: number, width:number, height: number): void
 ```html
   <!-- xxx.hml -->
   <div>
-    <canvas ref="canvas" style="width: 200px; height: 150px; "></canvas>
+    <canvas ref="canvas" style="width: 500px; height: 500px; "></canvas>
   </div>
 ```
 
@@ -620,7 +620,7 @@ clearRect(x: number, y: number, width:number, height: number): void
   ```html
   <!-- xxx.hml -->
   <div>
-    <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
+    <canvas ref="canvas" style="width: 500px; height: 500px;"></canvas>
   </div>
   ```
 
@@ -983,7 +983,7 @@ createPattern(image: Image, repetition: string): Object
   ```html
   <!-- xxx.hml -->
   <div>
-    <canvas ref="canvas" style="width: 200px; height: 150px;"></canvas>
+    <canvas ref="canvas" style="width: 1000px; height: 1000px;"></canvas>
   </div>
   ```
 
@@ -997,7 +997,7 @@ createPattern(image: Image, repetition: string): Object
       img.src = 'common/images/example.jpg';
       var pat = ctx.createPattern(img, 'repeat');
       ctx.fillStyle = pat;
-      ctx.fillRect(0, 0, 20, 20);
+      ctx.fillRect(0, 0, 500, 500);
     }
   }
   ```
@@ -1573,7 +1573,7 @@ drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeig
   ```html
   <!-- xxx.hml -->
   <div>
-    <canvas style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+    <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
   </div>
   ```
 
@@ -1581,11 +1581,11 @@ drawImage(image: Image | PixelMap, sx: number, sy: number, sWidth: number, sHeig
   //xxx.js
   export default {
     onShow() {
-      var test = this.$element('drawImage');
+      var test = this.$refs.canvas;
       var ctx = test.getContext('2d');
       var img = new Image();
       img.src = 'common/image/test.jpg';
-      ctx.drawImage(img, 50, 80, 80, 80);
+      ctx.drawImage(img, 0, 0, 200, 200, 10, 10, 200, 200);
     }
   }
   ```

zh-cn/application-dev/reference/arkui-js/js-components-canvas-path2d.md

@@ -65,7 +65,7 @@ setTransform(scaleX: number, skewX: number, skewY: number, scaleY: number, trans
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
@@ -96,7 +96,7 @@ closePath(): void
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
@@ -224,7 +224,7 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
@@ -265,7 +265,7 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
@@ -308,7 +308,7 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
 </div>
   ```
 
@@ -349,7 +349,7 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   ```html
 <!-- xxx.hml -->
 <div>
-  <canvas ref="canvas" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas>
+  <canvas ref="canvas" style="width: 300px; height: 250px; background-color: #ffff00;"></canvas>
 </div>
   ```
 

zh-cn/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md

@@ -18,7 +18,7 @@
 **示例：** 
 ```html
 <!-- xxx.hml -->
-<div style="width: 180px; height: 60px;">
+<div style="width: 500px; height: 500px;">
   <canvas ref="canvasId" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
 ```
@@ -94,7 +94,7 @@ isPointInPath(path?: Path2D, x: number, y: number): boolean
 **示例：** 
 ```html
 <!-- xxx.hml -->
-<div style="width: 180px; height: 60px;">
+<div style="width: 500px; height: 500px;">
   <text>In path:{{textValue}}</text>
   <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
@@ -144,7 +144,7 @@ isPointInStroke(path?: Path2D, x: number, y: number): boolean
 **示例：** 
 ```html
 <!-- xxx.hml -->
-<div style="width: 180px; height: 60px;">
+<div style="width: 500px; height: 500px;">
   <text>In path:{{textValue}}</text>
   <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>
@@ -180,7 +180,7 @@ resetTransform(): void
 **示例：** 
 ```html
 <!-- xxx.hml -->
-<div style="width: 180px; height: 60px;">
+<div style="width: 500px; height: 500px;">
   <text>In path:{{textValue}}</text>
   <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas>
 </div>

zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md

@@ -1745,7 +1745,7 @@ rotate(angle: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
+            this.context.rotate(45 * Math.PI / 180)
             this.context.fillRect(70, 20, 50, 50)
           })
       }

zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md

@@ -1850,7 +1850,7 @@ rotate(angle: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.offContext.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
+            this.offContext.rotate(45 * Math.PI / 180)
             this.offContext.fillRect(70, 20, 50, 50)
             var image = this.offContext.transferToImageBitmap()
             this.context.transferFromImageBitmap(image)