@@ -262,7 +259,7 @@ Only the following style attributes are supported.
-## Event
@@ -283,5 +281,5 @@ Not supported
```
-
+
diff --git a/en/application-dev/reference/arkui-js/js-components-basic-toolbar.md b/en/application-dev/reference/arkui-js/js-components-basic-toolbar.md
index e5b019c80be41ff3d67d015b69f73aeb94d79f3a..3f0e8675f69a606e6cbcb145e48bc5cd1591eab1 100644
--- a/en/application-dev/reference/arkui-js/js-components-basic-toolbar.md
+++ b/en/application-dev/reference/arkui-js/js-components-basic-toolbar.md
@@ -2,10 +2,7 @@
The **** component provides a bar that is usually placed at the bottom of a page to display operation options for the page.
-> **NOTE:**
->This component is supported since API version 5.
-
-## Permission List** component is supported.
>A maximum of five **** components can be contained in a **** component. If there are six or more, only the first four are displayed, and the rest items are hidden in the **More** list of the toolbar. Users can click **More** to view the hidden items.
>The list is displayed in the default style instead of a customized style set for the **** component.
-## Attribute** component is used for customizing drawings.
-## Permission List
-
-
-
-
-
-
-
-
-
-CanvasRenderingContext2D .
-
-
-
-
-type: specifies the image format. This parameter is optional. The default format is image/png. encoderOptions: When the image format is set to image/jpeg or image/webp, the image quality can be selected from 0 to 1. If the value of this parameter is beyond the value range, the default value 0.92 is used.
+### getContext
+
+
+
+
+
+
+
+
+ ContextAttrOptions
+
+
+
+
+ **Table 1** ContextAttrOptions
+
+
+
+
+
+
+
+
+
+- Return values
+
+
+
+ CanvasRenderingContext2D
+
+
+
+
+### toDataURL6+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Return values
+
+
+
+
+
+
+
## Example
+
+
```
- 
+ ```
+ // xxx.js
+ export default {
+ handleClick() {
+ 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');
+ }
+ }
+ ```
+ 
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
index bed0f06aa22212c7e88c6cd93731f9f7c38593e4..e9dc8c57cd6388134b548137b98849640d768e8f 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-canvasrenderingcontext2d.md
@@ -1,5 +1,6 @@
# CanvasRenderingContext2D
NOTE:
+
NOTE:
+
lineDashOffset
@@ -225,8 +226,22 @@
### fillStyle
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = '#0000ff';
+ ctx.fillRect(20, 20, 150, 100);
+ }
+}
```
@@ -234,8 +249,22 @@ ctx.fillRect(20, 20, 150, 100);
### lineWidth
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.lineWidth = 5;
+ ctx.strokeRect(25, 25, 85, 105);
+ }
+}
```
@@ -243,9 +272,23 @@ ctx.strokeRect(25, 25, 85, 105);
### strokeStyle
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.lineWidth = 10;
+ ctx.strokeStyle = '#0000ff';
+ ctx.strokeRect(25, 25, 155, 105);
+ }
+}
```
@@ -253,12 +296,26 @@ ctx.strokeRect(25, 25, 155, 105);
### lineCap
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.lineWidth = 8;
+ ctx.beginPath();
+ ctx.lineCap = 'round';
+ ctx.moveTo(30, 50);
+ ctx.lineTo(220, 50);
+ ctx.stroke();
+ }
+}
```
@@ -266,13 +323,27 @@ ctx.stroke();
### lineJoin
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.lineWidth = 8;
+ ctx.lineJoin = 'miter';
+ ctx.moveTo(30, 30);
+ ctx.lineTo(120, 60);
+ ctx.lineTo(30, 110);
+ ctx.stroke();
+ }
+}
```
@@ -280,13 +351,27 @@ ctx.stroke();
### miterLimit
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.lineWidth =14;
+ ctx.lineJoin = 'miter';
+ ctx.miterLimit = 3;
+ ctx.moveTo(30, 30);
+ ctx.lineTo(120, 60);
+ ctx.lineTo(30, 70);
+ ctx.stroke();
+ }
+}
```
@@ -294,8 +379,22 @@ ctx.stroke();
### font
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.font = '30px sans-serif';
+ ctx.fillText("Hello World", 20, 60);
+ }
+}
```
@@ -303,24 +402,38 @@ ctx.fillText("Hello World", 20, 60);
### textAlign
+
+```
-ctx.font = '18px sans-serif';
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.strokeStyle = '#0000ff';
+ ctx.moveTo(140, 10);
+ ctx.lineTo(140, 160);
+ ctx.stroke();
+
+ ctx.font = '18px sans-serif';
// Show the textAlign values.
-ctx.textAlign = 'start';
-ctx.fillText('textAlign=start', 140, 60);
-ctx.textAlign = 'end';
-ctx.fillText('textAlign=end', 140, 80);
-ctx.textAlign = 'left';
-ctx.fillText('textAlign=left', 140, 100);
-ctx.textAlign = 'center';
-ctx.fillText('textAlign=center',140, 120);
-ctx.textAlign = 'right';
-ctx.fillText('textAlign=right',140, 140);
+ ctx.textAlign = 'start';
+ ctx.fillText('textAlign=start', 140, 60);
+ ctx.textAlign = 'end';
+ ctx.fillText('textAlign=end', 140, 80);
+ ctx.textAlign = 'left';
+ ctx.fillText('textAlign=left', 140, 100);
+ ctx.textAlign = 'center';
+ ctx.fillText('textAlign=center',140, 120);
+ ctx.textAlign = 'right';
+ ctx.fillText('textAlign=right',140, 140);
+ }
+}
```
@@ -328,23 +441,37 @@ ctx.fillText('textAlign=right',140, 140);
### textBaseline
+
+```
-ctx.font = '20px sans-serif';
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.strokeStyle = '#0000ff';
+ ctx.moveTo(0, 120);
+ ctx.lineTo(400, 120);
+ ctx.stroke();
-ctx.textBaseline = 'top';
-ctx.fillText('Top', 10, 120);
-ctx.textBaseline = 'bottom';
-ctx.fillText('Bottom', 55, 120);
-ctx.textBaseline = 'middle';
-ctx.fillText('Middle', 125, 120);
-ctx.textBaseline = 'alphabetic';
-ctx.fillText('Alphabetic', 195, 120);
-ctx.textBaseline = 'hanging';
-ctx.fillText('Hanging', 295, 120);
+ ctx.font = '20px sans-serif';
+
+ ctx.textBaseline = 'top';
+ ctx.fillText('Top', 10, 120);
+ ctx.textBaseline = 'bottom';
+ ctx.fillText('Bottom', 55, 120);
+ ctx.textBaseline = 'middle';
+ ctx.fillText('Middle', 125, 120);
+ ctx.textBaseline = 'alphabetic';
+ ctx.fillText('Alphabetic', 195, 120);
+ ctx.textBaseline = 'hanging';
+ ctx.fillText('Hanging', 295, 120);
+ }
+}
```
@@ -352,11 +479,26 @@ ctx.fillText('Hanging', 295, 120);
### globalAlpha
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(0, 0, 50, 50);
+ ctx.globalAlpha = 0.4;
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(50, 50, 50, 50);
+
+ }
+}
```
@@ -364,17 +506,31 @@ ctx.fillRect(50, 50, 50, 50);
### lineDashOffset
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.arc(100, 75, 50, 0, 6.28);
+ ctx.setLineDash([10,20]);
+ ctx.lineDashOffset = 10.0;
+ ctx.stroke();
+ }
+}
```
### globalCompositeOperation
@@ -445,17 +601,31 @@ ctx.stroke();
- Example
```
- ctx.fillStyle = 'rgb(255,0,0)';
- ctx.fillRect(20, 20, 50, 50);
- ctx.globalCompositeOperation = 'source-over';
- ctx.fillStyle = 'rgb(0,0,255)';
- ctx.fillRect(50, 50, 50, 50);
- // Start drawing second example
- ctx.fillStyle = 'rgb(255,0,0)';
- ctx.fillRect(120, 20, 50, 50);
- ctx.globalCompositeOperation = 'destination-over';
- ctx.fillStyle = 'rgb(0,0,255)';
- ctx.fillRect(150, 50, 50, 50);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(20, 20, 50, 50);
+ ctx.globalCompositeOperation = 'source-over';
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(50, 50, 50, 50);
+ // Start drawing second example
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(120, 20, 50, 50);
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(150, 50, 50, 50);
+ }
+ }
```
@@ -466,10 +636,24 @@ ctx.stroke();
### shadowBlur
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.shadowBlur = 30;
+ ctx.shadowColor = 'rgb(0,0,0)';
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(20, 20, 100, 80);
+ }
+}
```
@@ -477,10 +661,24 @@ ctx.fillRect(20, 20, 100, 80);
### shadowColor
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.shadowBlur = 30;
+ ctx.shadowColor = 'rgb(0,0,255)';
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(30, 30, 100, 100);
+ }
+}
```
@@ -488,11 +686,25 @@ ctx.fillRect(30, 30, 100, 100);
### shadowOffsetX
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.shadowBlur = 10;
+ ctx.shadowOffsetX = 20;
+ ctx.shadowColor = 'rgb(0,0,0)';
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(20, 20, 100, 80);
+ }
+}
```
@@ -500,11 +712,25 @@ ctx.fillRect(20, 20, 100, 80);
### shadowOffsetY
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.shadowBlur = 10;
+ ctx.shadowOffsetY = 20;
+ ctx.shadowColor = 'rgb(0,0,0)';
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(30, 30, 100, 100);
+ }
+}
```
@@ -512,12 +738,26 @@ ctx.fillRect(30, 30, 100, 100);
### imageSmoothingEnabled6+
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var img = new Image();
+ img.src = 'common/image/example.jpg';
+ img.onload = function() {
+ ctx.imageSmoothingEnabled = false;
+ ctx.drawImage(img, 0, 0, 400, 200);
+ };
+ }
+}
```
@@ -530,7 +770,7 @@ fillRect\(x: number, y: number, width:number, height: number\): void
Fills a rectangle on the canvas.
-- Parameter
+- Parameters
@@ -559,7 +799,7 @@ Fills a rectangle on the canvas.
+
@@ -575,7 +815,21 @@ Fills a rectangle on the canvas.
- Example
```
- ctx.fillRect(20, 20, 200, 150);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.fillRect(20, 20, 200, 150);
+ }
+ }
```
@@ -587,7 +841,7 @@ clearRect\(x: number, y: number, width:number, height: number\): void
Clears the content in a rectangle on the canvas.
-- Parameter
+- Parameters
@@ -616,7 +870,7 @@ Clears the content in a rectangle on the canvas.
+
@@ -632,9 +886,23 @@ Clears the content in a rectangle on the canvas.
- Example
```
- ctx.fillStyle = 'rgb(0,0,255)';
- ctx.fillRect(0, 0, 400, 200);
- ctx.clearRect(20, 20, 150, 100);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(0, 0, 400, 200);
+ ctx.clearRect(20, 20, 150, 100);
+ }
+ }
```
@@ -646,7 +914,7 @@ strokeRect\(x: number, y: number, width:number, height: number\): void
Draws a rectangle stroke on the canvas.
-- Parameter
+- Parameters
@@ -675,7 +943,7 @@ Draws a rectangle stroke on the canvas.
+
@@ -691,7 +959,21 @@ Draws a rectangle stroke on the canvas.
- Example
```
- ctx.strokeRect(30, 30, 200, 150);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.strokeRect(30, 30, 200, 150);
+ }
+ }
```
@@ -703,7 +985,7 @@ fillText\(text: string, x: number, y: number\): void
Draws filled text on the canvas.
-- Parameter
+- Parameters
@@ -741,8 +1023,22 @@ Draws filled text on the canvas.
- Example
```
- ctx.font = '35px sans-serif';
- ctx.fillText("Hello World!", 20, 60);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.font = '35px sans-serif';
+ ctx.fillText("Hello World!", 10, 60);
+ }
+ }
```
@@ -754,7 +1050,7 @@ strokeText\(text: string, x: number, y: number\): void
Draws a text stroke on the canvas.
-- Parameter
+- Parameters
@@ -792,8 +1088,22 @@ Draws a text stroke on the canvas.
- Example
```
- ctx.font = '25px sans-serif';
- ctx.strokeText("Hello World!", 20, 60);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.font = '25px sans-serif';
+ ctx.strokeText("Hello World!", 10, 60);
+ }
+ }
```
@@ -805,7 +1115,7 @@ measureText\(text: string\): TextMetrics
Returns a **TextMetrics** object used to obtain the width of specified text.
-- Parameter
+- Parameters
@@ -846,10 +1156,24 @@ Returns a **TextMetrics** object used to obtain the width of specified text.
- Example
```
- ctx.font = '25px sans-serif';
- var txt = 'Hello World';
- ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60);
- ctx.fillText(txt, 20, 110);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.font = '20px sans-serif';
+ var txt = 'Hello World';
+ ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60);
+ ctx.fillText(txt, 20, 110);
+ }
+ }
```
@@ -864,13 +1188,28 @@ Draws a stroke.
- Example
```
- ctx.moveTo(25, 25);
- ctx.lineTo(25, 105);
- ctx.strokeStyle = 'rgb(0,0,255)';
- ctx.stroke();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.moveTo(25, 25);
+ ctx.lineTo(25, 250);
+ ctx.lineWidth = '6';
+ ctx.strokeStyle = 'rgb(0,0,255)';
+ ctx.stroke();
+ }
+ }
```
- 
+ 
### beginPath
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.lineWidth = '6';
+ ctx.strokeStyle = '#0000ff';
+ ctx.moveTo(15, 80);
+ ctx.lineTo(280, 80);
+ ctx.stroke();
+ }
+ }
```
@@ -899,7 +1252,7 @@ moveTo\(x: number, y: number\): void
Moves a drawing path to a target position on the canvas.
-- Parameter
+- Parameters
@@ -930,10 +1283,24 @@ Moves a drawing path to a target position on the canvas.
- Example
```
- ctx.beginPath();
- ctx.moveTo(10, 10);
- ctx.lineTo(280, 160);
- ctx.stroke();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(10, 10);
+ ctx.lineTo(280, 160);
+ ctx.stroke();
+ }
+ }
```
@@ -945,7 +1312,7 @@ lineTo\(x: number, y: number\): void
Connects the current point to a target position using a straight line.
-- Parameter
+- Parameters
@@ -976,10 +1343,24 @@ Connects the current point to a target position using a straight line.
- Example
```
- ctx.beginPath();
- ctx.moveTo(10, 10);
- ctx.lineTo(280, 160);
- ctx.stroke();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(10, 10);
+ ctx.lineTo(280, 160);
+ ctx.stroke();
+ }
+ }
```
@@ -994,12 +1375,26 @@ Draws a closed path.
- Example
```
- ctx.beginPath();
- ctx.moveTo(30, 30);
- ctx.lineTo(110, 30);
- ctx.lineTo(70, 90);
- ctx.closePath();
- ctx.stroke();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(30, 30);
+ ctx.lineTo(110, 30);
+ ctx.lineTo(70, 90);
+ ctx.closePath();
+ ctx.stroke();
+ }
+ }
```
@@ -1011,7 +1406,7 @@ createPattern\(image: Image, repetition: string\): Object
Creates a pattern for image filling based on a specified source image and repetition mode.
-- Parameter
+- Parameters
@@ -1059,9 +1454,25 @@ Creates a pattern for image filling based on a specified source image and repeti
- Example
```
- var pat = ctx.createPattern(img, 'repeat');
- ctx.fillStyle = pat;
- ctx.fillRect(0, 0, 20, 20);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var img = new Image();
+ img.src = 'common/images/example.jpg';
+ var pat = ctx.createPattern(img, 'repeat');
+ ctx.fillStyle = pat;
+ ctx.fillRect(0, 0, 20, 20);
+ }
+ }
```
@@ -1073,7 +1484,7 @@ bezierCurveTo\(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number
Draws a cubic bezier curve on the canvas.
-- Parameter
+- Parameters
@@ -1132,10 +1543,24 @@ Draws a cubic bezier curve on the canvas.
- Example
```
- ctx.beginPath();
- ctx.moveTo(10, 10);
- ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
- ctx.stroke();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(10, 10);
+ ctx.bezierCurveTo(20, 100, 200, 100, 200, 20);
+ ctx.stroke();
+ }
+ }
```
@@ -1147,7 +1572,7 @@ quadraticCurveTo\(cpx: number, cpy: number, x: number, y: number\): void
Draws a quadratic curve on the canvas.
-- Parameter
+- Parameters
@@ -1192,10 +1617,24 @@ Draws a quadratic curve on the canvas.
- Example
```
- ctx.beginPath();
- ctx.moveTo(20, 20);
- ctx.quadraticCurveTo(100, 100, 200, 20);
- ctx.stroke();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.moveTo(20, 20);
+ ctx.quadraticCurveTo(100, 100, 200, 20);
+ ctx.stroke();
+ }
+ }
```
@@ -1207,7 +1646,7 @@ arc\(x: number, y: number, radius: number, startAngle: number, endAngle: number,
Draws an arc on the canvas.
-- Parameter
+- Parameters
@@ -1266,9 +1705,23 @@ Draws an arc on the canvas.
- Example
```
- ctx.beginPath();
- ctx.arc(100, 75, 50, 0, 6.28);
- ctx.stroke();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.arc(100, 75, 50, 0, 6.28);
+ ctx.stroke();
+ }
+ }
```
@@ -1280,7 +1733,7 @@ arcTo\(x1: number, y1: number, x2: number, y2: number, radius: number\): void
Draws an arc based on the radius and points on the arc.
-- Parameter
+- Parameters
@@ -1332,9 +1785,23 @@ Draws an arc based on the radius and points on the arc.
- Example
```
- ctx.moveTo(100, 20);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.moveTo(100, 20);
ctx.arcTo(150, 20, 150, 70, 50); // Create an arc.
- ctx.stroke();
+ ctx.stroke();
+ }
+ }
```
@@ -1346,7 +1813,7 @@ ellipse\(x: number, y: number, radiusX: number, radiusY: number, rotation: numbe
Draws an ellipse in the specified rectangular region.
-- Parameter
+- Parameters
@@ -1361,28 +1828,28 @@ Draws an ellipse in the specified rectangular region.
+
+
+
+
@@ -1419,9 +1886,23 @@ Draws an ellipse in the specified rectangular region.
- Example
```
- ctx.beginPath();
- ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
- ctx.stroke();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.beginPath();
+ ctx.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
+ ctx.stroke();
+ }
+ }
```
@@ -1433,7 +1914,7 @@ rect\(x: number, y: number, width: number, height: number\): void
Creates a rectangle.
-- Parameter
+- Parameters
@@ -1462,7 +1943,7 @@ Creates a rectangle.
+
@@ -1478,8 +1959,22 @@ Creates a rectangle.
- Example
```
- ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
- ctx.stroke(); // Draw it
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20)
+ ctx.stroke(); // Draw it
+ }
+ }
```
@@ -1494,8 +1989,22 @@ Fills the area inside a closed path.
- Example
```
- ctx.rect(20, 20, 100, 100); // Create a 100 x 100 rectangle at (20, 20).
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20).
ctx.fill(); // Fill the rectangle using default settings.
+ }
+ }
```
@@ -1510,12 +2019,26 @@ Sets the current path to a clipping path.
- Example
```
- ctx.rect(0, 0, 200, 200);
- ctx.stroke();
- ctx.clip();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.rect(0, 0, 200, 200);
+ ctx.stroke();
+ ctx.clip();
// Clip a rectangle and fill it with red paint.
- ctx.fillStyle = "rgb(255,0,0)";
- ctx.fillRect(0, 0, 150, 150);
+ ctx.fillStyle = "rgb(255,0,0)";
+ ctx.fillRect(0, 0, 150, 150);
+ }
+ }
```
@@ -1527,7 +2050,7 @@ rotate\(rotate: number\): void
Rotates a canvas clockwise around its coordinate axes.
-- Parameter
+- Parameters
@@ -1551,8 +2074,22 @@ Rotates a canvas clockwise around its coordinate axes.
- Example
```
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees.
- ctx.fillRect(70, 20, 50, 50);
+ ctx.fillRect(70, 20, 50, 50);
+ }
+ }
```
@@ -1564,7 +2101,7 @@ scale\(x: number, y: number\): void
Scales a canvas based on scaling factors.
-- Parameter
+- Parameters
@@ -1595,9 +2132,23 @@ Scales a canvas based on scaling factors.
- Example
```
- ctx.strokeRect(10, 10, 25, 25);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.strokeRect(10, 10, 25, 25);
ctx.scale(2, 2);// Set a 200% scale factor for the rectangle.
- ctx.strokeRect(10, 10, 25, 25);
+ ctx.strokeRect(10, 10, 25, 25);
+ }
+ }
```
@@ -1614,7 +2165,7 @@ Defines a transformation matrix. To transform a graph, you only need to set para
>- x' = scaleX \* x + skewY \* y + translateX
>- y' = skewX \* x + scaleY \* y + translateY
-- Parameter
+- Parameters
@@ -1673,14 +2224,28 @@ Defines a transformation matrix. To transform a graph, you only need to set para
- Example
```
- ctx.fillStyle = 'rgb(0,0,0)';
- ctx.fillRect(0, 0, 100, 100)
- ctx.transform(1, 0.5, -0.5, 1, 10, 10);
- ctx.fillStyle = 'rgb(255,0,0)';
- ctx.fillRect(0, 0, 100, 100);
- ctx.transform(1, 0.5, -0.5, 1, 10, 10);
- ctx.fillStyle = 'rgb(0,0,255)';
- ctx.fillRect(0, 0, 100, 100);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(0,0,0)';
+ ctx.fillRect(0, 0, 100, 100)
+ ctx.transform(1, 0.5, -0.5, 1, 10, 10);
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(0, 0, 100, 100);
+ ctx.transform(1, 0.5, -0.5, 1, 10, 10);
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(0, 0, 100, 100);
+ }
+ }
```
@@ -1751,11 +2316,25 @@ Resets the existing transformation matrix and creates a new transformation matri
- Example
```
- ctx.fillStyle = 'rgb(255,0,0)';
- ctx.fillRect(0, 0, 100, 100)
- ctx.setTransform(1,0.5, -0.5, 1, 10, 10);
- ctx.fillStyle = 'rgb(0,0,255)';
- ctx.fillRect(0, 0, 100, 100);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.fillStyle = 'rgb(255,0,0)';
+ ctx.fillRect(0, 0, 100, 100)
+ ctx.setTransform(1,0.5, -0.5, 1, 10, 10);
+ ctx.fillStyle = 'rgb(0,0,255)';
+ ctx.fillRect(0, 0, 100, 100);
+ }
+ }
```
@@ -1767,7 +2346,7 @@ translate\(x: number, y: number\): void
Moves the origin of the coordinate system.
-- Parameter
+- Parameters
@@ -1798,9 +2377,23 @@ Moves the origin of the coordinate system.
- Example
```
- ctx.fillRect(10, 10, 50, 50);
- ctx.translate(70, 70);
- ctx.fillRect(10, 10, 50, 50);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.fillRect(10, 10, 50, 50);
+ ctx.translate(70, 70);
+ ctx.fillRect(10, 10, 50, 50);
+ }
+ }
```
@@ -1812,7 +2405,7 @@ createPath2D\(path: Path2D, cmds: string\): Path2D
Creates a **Path2D** object.
-- Parameter
+- Parameters
@@ -1847,16 +2440,30 @@ Creates a **Path2D** object.
- Example
```
- var path1 = ctx.createPath2D();
- path1.moveTo(100, 100);
- path1.lineTo(200, 100);
- path1.lineTo(100, 200);
- path1.closePath();
- ctx.stroke(path1);
- var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z");
- ctx.stroke(path2);
- var path3 = ctx.createPath2D(path2);
- ctx.stroke(path3);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path1 = ctx.createPath2D();
+ path1.moveTo(100, 100);
+ path1.lineTo(200, 100);
+ path1.lineTo(100, 200);
+ path1.closePath();
+ ctx.stroke(path1);
+ var path2 = ctx.createPath2D("M150 150 L50 250 L250 250 Z");
+ ctx.stroke(path2);
+ var path3 = ctx.createPath2D(path2);
+ ctx.stroke(path3);
+ }
+ }
```
@@ -1868,7 +2475,7 @@ drawImage\(image: Image, sx: number, sy: number, sWidth: number, sHeight: number
Draws an image.
-- Parameter
+- Parameters
@@ -1948,11 +2555,23 @@ Draws an image.
- Example
```
- var test = this.$element('drawImage');
- var ctx = test.getContext('2d');
- var img = new Image();
- img.src = 'common/image/test.jpg';
- ctx.drawImage(img, 50, 80, 80, 80);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ var test = this.$element('drawImage');
+ var ctx = test.getContext('2d');
+ var img = new Image();
+ img.src = 'common/image/test.jpg';
+ ctx.drawImage(img, 50, 80, 80, 80);
+ }
+ }
```
@@ -1967,7 +2586,21 @@ Restores the saved drawing context.
- Example
```
- ctx.restore();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.restore();
+ }
+ }
```
@@ -1980,7 +2613,21 @@ Saves the current drawing context.
- Example
```
- ctx.save();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.save();
+ }
+ }
```
@@ -1990,7 +2637,7 @@ createLinearGradient\(x0: number, y0: number, x1: number, y1: number\): Object
Creates a linear gradient. A CanvasGradient object is returned. For details, see [CanvasGradient](js-components-canvas-canvasgradient.md).
-- Parameter
+- Parameters
@@ -2005,34 +2652,34 @@ Creates a linear gradient. A CanvasGradient object is returned. For details, see
+
+
+
+
-- Return Value
+- Return values
@@ -2053,8 +2700,10 @@ Creates a linear gradient. A CanvasGradient object is returned. For details, see
```
-
+
```
```
@@ -2085,7 +2734,7 @@ createRadialGradient\(x0: number, y0: number, r0: number, x1: number, y1: number
Creates a radial gradient and returns a **CanvasGradient** object.
-- Parameter
+- Parameters
@@ -2100,14 +2749,14 @@ Creates a radial gradient and returns a **CanvasGradient** object.
+
+
@@ -2121,14 +2770,14 @@ Creates a radial gradient and returns a **CanvasGradient** object.
+
+
@@ -2152,7 +2801,7 @@ Creates a radial gradient and returns a **CanvasGradient** object.
+
+
```
```
@@ -2194,7 +2845,7 @@ createImageData\(width: number, height: number, imageData: Object\): Object
Creates an **ImageData** object. For details, see [ImageData](js-components-canvas-imagedata.md).
-- Parameter
+- Parameters
@@ -2249,8 +2900,22 @@ Creates an **ImageData** object. For details, see [ImageData](js-components-c
- Example
```
- imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height
- newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height
+ newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData
+ }
+ }
```
@@ -2260,7 +2925,7 @@ getImageData\(sx: number, sy: number, sw: number, sh: number\): Object
Creates an **ImageData** object with pixels in the specified area on the canvas.
-- Parameter
+- Parameters
@@ -2275,14 +2940,14 @@ Creates an **ImageData** object with pixels in the specified area on the canva
+
+
@@ -2322,9 +2987,21 @@ Creates an **ImageData** object with pixels in the specified area on the canva
- Example
```
- var test = this.$element('getImageData');
- var ctx = test.getContext('2d');
- var imageData = ctx.getImageData(0, 0, 280, 300);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ var test = this.$element('getImageData')
+ var ctx = test.getContext('2d');
+ var imageData = ctx.getImageData(0, 0, 280, 300);
+ }
+ }
```
@@ -2334,7 +3011,7 @@ putImageData\(imageData: Object, dx: number, dy: number, dirtyX: number, dirtyY:
Puts the **ImageData** onto a rectangular area on the canvas.
-- Parameter
+- Parameters
@@ -2400,16 +3077,28 @@ Puts the **ImageData** onto a rectangular area on the canvas.
- Example
```
- var test = this.$element('putImageData');
- var ctx = test.getContext('2d');
- var imgData = ctx.createImageData(100, 100);
- for (var i = 0; i < imgData.data.length; i += 4) {
- imgData.data[i + 0] = 255;
- imgData.data[i + 1] = 0;
- imgData.data[i + 2] = 0;
- imgData.data[i + 3] = 255;
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ var test = this.$element('getImageData')
+ var ctx = test.getContext('2d');
+ var imgData = ctx.createImageData(100, 100);
+ for (var i = 0; i < imgData.data.length; i += 4) {
+ imgData.data[i + 0] = 255;
+ imgData.data[i + 1] = 0;
+ imgData.data[i + 2] = 0;
+ imgData.data[i + 3] = 255;
+ }
+ ctx.putImageData(imgData, 10, 10);
+ }
}
- ctx.putImageData(imgData, 10, 10);
```
@@ -2421,7 +3110,7 @@ setLineDash\(segments: Array\): void
Sets the dash line style.
-- Parameter
+- Parameters
@@ -2445,9 +3134,23 @@ Sets the dash line style.
- Example
```
- ctx.arc(100, 75, 50, 0, 6.28);
- ctx.setLineDash([10,20]);
- ctx.stroke();
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.arc(100, 75, 50, 0, 6.28);
+ ctx.setLineDash([10,20]);
+ ctx.stroke();
+ }
+ }
```
@@ -2470,7 +3173,7 @@ Obtains the dash line style.
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var info = ctx.getLineDash();
+ }
+ }
```
@@ -2489,7 +3206,7 @@ transferFromImageBitmap\(bitmap: ImageBitmap\): void
Displays the specified **ImageBitmap** object.
-- Parameter
+- Parameters
@@ -2513,15 +3230,28 @@ Displays the specified **ImageBitmap** object.
- Example
```
- var canvas = this.$refs.canvasId.getContext('2d');
- var offscreen = new OffscreenCanvas(500,500);
- var offscreenCanvasCtx = offscreen.getContext("2d");
- offscreenCanvasCtx.fillRect(0, 0, 200, 200);
+
+
+
+ ```
+
+ ```
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var canvas = this.$refs.canvas.getContext('2d');
+ var offscreen = new OffscreenCanvas(500,500);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
+ offscreenCanvasCtx.fillRect(0, 0, 200, 200);
- var bitmap = offscreen.transferToImageBitmap();
- canvas.transferFromImageBitmap(bitmap);
+ var bitmap = offscreen.transferToImageBitmap();
+ canvas.transferFromImageBitmap(bitmap);
+ }
+ }
```
-
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-image.md b/en/application-dev/reference/arkui-js/js-components-canvas-image.md
index 46dce7fc255b8cb8c25d13aafca8807658e6cb74..8ad046dea4f04309fca88e860adf17f3a561d6ad 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-image.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-image.md
@@ -2,10 +2,10 @@
**Image** allows you to add an image.
-## Attribute
+
+
@@ -36,7 +36,7 @@
+
@@ -47,7 +47,7 @@
+
@@ -78,17 +78,30 @@
## Example
+
```
-
+```
+//xxx.js
+export default {
+ onShow(){
+ const el =this.$refs.canvas
+ var ctx = this.$element('drawImage').getContext('2d');
+ var img = new Image();
+ img.src = 'common/images/example.jpg';
+ img.onload = function() {
+ console.log('Image load success');
+ ctx.drawImage(img, 0, 0, 360, 250);
+ };
+ img.onerror = function() {
+ console.log('Image load fail');
+ };
+ }
+}
+```
+
+
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md
index 10d8bceff27ac5457b9e2003781b87b27d0dff8f..b8fa0a4cf0f4a21c43b61b6de94bea3191241cd0 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-imagebitmap.md
@@ -1,9 +1,9 @@
# ImageBitmap
-
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-imagedata.md b/en/application-dev/reference/arkui-js/js-components-canvas-imagedata.md
index ca3d42fa56432c1ca77b46cb32b5da9f3dac665d..5be0cc8d984b5eb433c4fe476d18f83a7b857283 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-imagedata.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-imagedata.md
@@ -37,3 +37,29 @@
+## Example
+
+```
+
+```
+//xxx.js
+import prompt from '@system.prompt';
+export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ ctx.fillRect(0,0,200,200)
+ var imageData = ctx.createImageData(1,1)
+ prompt.showToast({
+ message:imageData,
+ duration:5000
+ })
+ }
+}
+```
+
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md b/en/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md
index c23d6a59618fc4325cd1d8c62a0bf54743af55dd..ff809fb5f91c182738670f03821508e6de31e301 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-offscreencanvas.md
@@ -1,9 +1,9 @@
# OffscreenCanvas
+
+
-
-
-
-
-
-
-
-
-OffscreenCanvasRenderingContext2D .
-
-
-
-
-
-
-
+### getContext
+
+
+
+
+
+
+
+
+ CanvasRenderingContext2DSettings
+
+
+
+
+- Return values
+
+
+
+ OffscreenCanvasRenderingContext2D
+
+
+
+
+### toDataURL
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Return values
+
+
+
+
+
+
+
+
+### transferToImageBitmap
+
+ ImageBitmap
+
+
+
## Example
+
+```
+
+```
+//xxx.js
+export default {
+ onShow() {
+ var canvas = this.$refs.canvasId.getContext('2d');
+ var offscreen = new OffscreenCanvas(500,500);
+ var offscreenCanvasCtx = offscreen.getContext("2d");
-// ... some drawing for the canvas using the offscreenCanvasCtx ...
+ // ... some drawing for the canvas using the offscreenCanvasCtx ...
-var dataURL = offscreen.toDataURL();
-console.log(dataURL); //data:image/png;base64,xxxxxx
+ var dataURL = offscreen.toDataURL();
+ console.log(dataURL); //data:image/png;base64,xxxxxx
-var bitmap = offscreen.transferToImageBitmap();
-canvas.transferFromImageBitmap(bitmap);
+ var bitmap = offscreen.transferToImageBitmap();
+ canvas.transferFromImageBitmap(bitmap);
+ }
+}
```
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md b/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md
index bfbaf4f5b612b052ea3b0ab71ff41b2bfcdc7437..fe67c0ed601ba28ea698ed343546002bdbd50827 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas-path2d.md
@@ -1,9 +1,6 @@
# Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
-
-> **NOTE:**
->This component is supported since API version 6.
+**Path2D** allows you to describe a path through an existing path. This path can be drawn through the **stroke** API of **Canvas**.
## addPath
+
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
- var path2 = ctx.createPath2D();
- path2.addPath(path1);
- ctx.stroke(path2);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path1 = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
+ var path2 = ctx.createPath2D();
+ path2.addPath(path1);
+ ctx.stroke(path2);
+ }
+ }
```
+ 
+
## setTransform
+
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
- path.setTransform(0.8, 0, 0, 0.4, 0, 0);
- ctx.stroke(path);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D("M250 150 L150 350 L350 350 Z");
+ path.setTransform(0.8, 0, 0, 0.4, 0, 0);
+ ctx.stroke(path);
+ }
+ }
```
+ 
+
## closePath
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path = ctx.createPath2D();
- path.moveTo(200, 100);
- path.lineTo(300, 100);
- path.lineTo(200, 200);
- path.closePath();
- ctx.stroke(path);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.moveTo(200, 100);
+ path.lineTo(300, 100);
+ path.lineTo(200, 200);
+ path.closePath();
+ ctx.stroke(path);
+ }
+ }
```
+ 
+
## moveTo
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path = ctx.createPath2D();
- path.moveTo(50, 100);
- path.lineTo(250, 100);
- path.lineTo(150, 200);
- path.closePath();
- ctx.stroke(path);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.moveTo(50, 100);
+ path.lineTo(250, 100);
+ path.lineTo(150, 200);
+ path.closePath();
+ ctx.stroke(path);
+ }
+ }
```
+ 
+
## lineTo
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path = ctx.createPath2D();
- path.moveTo(100, 100);
- path.lineTo(100, 200);
- path.lineTo(200, 200);
- path.lineTo(200, 100);
- path.closePath();
- ctx.stroke(path);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.moveTo(100, 100);
+ path.lineTo(100, 200);
+ path.lineTo(200, 200);
+ path.lineTo(200, 100);
+ path.closePath();
+ ctx.stroke(path);
+ }
+ }
```
+ 
+
## bezierCurveTo
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path = ctx.createPath2D();
- path.moveTo(10, 10);
- path.bezierCurveTo(20, 100, 200, 100, 200, 20);
- ctx.stroke(path);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.moveTo(10, 10);
+ path.bezierCurveTo(20, 100, 200, 100, 200, 20);
+ ctx.stroke(path);
+ }
+ }
```
+ 
+
## quadraticCurveTo
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path = ctx.createPath2D();
- path.moveTo(10, 10);
- path.quadraticCurveTo(100, 100, 200, 20);
- ctx.stroke(path);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.moveTo(10, 10);
+ path.quadraticCurveTo(100, 100, 200, 20);
+ ctx.stroke(path);
+ }
+ }
```
+ 
+
## arc
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path = ctx.createPath2D();
- path.arc(100, 75, 50, 0, 6.28);
- ctx.stroke(path);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.arc(100, 75, 50, 0, 6.28);
+ ctx.stroke(path);
+ }
+ }
```
+ 
+
## arcTo
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path = ctx.createPath2D();
- path.arcTo(150, 20, 150, 70, 50);
- ctx.stroke(path);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.arcTo(150, 20, 150, 70, 50);
+ ctx.stroke(path);
+ }
+ }
```
+ 
+
## ellipse
+
+
+
+
@@ -594,15 +708,28 @@ Draws an ellipse in the specified rectangular region.
- Example
- 
+ ```
+
+
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path = ctx.createPath2D();
- path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
- ctx.stroke(path);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx =el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1);
+ ctx.stroke(path);
+ }
+ }
```
+ 
+
## rect
+
+
+
+
+
+ ```
```
- const ctx = canvas.getContext('2d');
- var path = ctx.createPath2D();
- path.rect(20, 20, 100, 100);
- ctx.stroke(path);
+ //xxx.js
+ export default {
+ onShow() {
+ const el =this.$refs.canvas;
+ const ctx = el.getContext('2d');
+ var path = ctx.createPath2D();
+ path.rect(20, 20, 100, 100);
+ ctx.stroke(path);
+ }
+ }
```
+ 
diff --git a/en/application-dev/reference/arkui-js/js-components-canvas.md b/en/application-dev/reference/arkui-js/js-components-canvas.md
index 1c5e8895af23205c04ade64b3c97d1ae5855747b..ffc337dc7eff4415dc24a5ab9212e19ddc792be8 100644
--- a/en/application-dev/reference/arkui-js/js-components-canvas.md
+++ b/en/application-dev/reference/arkui-js/js-components-canvas.md
@@ -18,4 +18,3 @@
- **[OffscreenCanvasRenderingContext2D](js-offscreencanvasrenderingcontext2d.md)**
-
diff --git a/en/application-dev/reference/arkui-js/js-components-common-animation.md b/en/application-dev/reference/arkui-js/js-components-common-animation.md
index 56c03e6547db8b4484ea2125cb5f766e50cbbace..417c9af4ab1ab4796458a581798352faf31a94b5 100644
--- a/en/application-dev/reference/arkui-js/js-components-common-animation.md
+++ b/en/application-dev/reference/arkui-js/js-components-common-animation.md
@@ -19,7 +19,7 @@ Components support dynamic rotation, translation, and scaling effects. These eff
+
@@ -369,7 +369,7 @@ Components support dynamic rotation, translation, and scaling effects. These eff
+
background-position: 200px 30% background-position: 100px top background-position: center center
-
diff --git a/en/application-dev/reference/arkui-js/js-components-common-attributes.md b/en/application-dev/reference/arkui-js/js-components-common-attributes.md
index ae890a000c7ec4aad8de1c526f66877aef58a40a..7c3db13df60375b2ae5988d747d7c8747da017af 100644
--- a/en/application-dev/reference/arkui-js/js-components-common-attributes.md
+++ b/en/application-dev/reference/arkui-js/js-components-common-attributes.md
@@ -72,18 +72,21 @@ Common attributes are used to set component identities and appearance.
+
+
+
+
+
+Use After a DOM element is obtained by using NOTE:
+
+
DragEvent
+
DragEvent
+
DragEvent
+
DragEvent
+
DragEvent
+
> **NOTE:**
->- Events not listed in the preceding table are non-bubbling events, such as the [change event](js-components-basic-input.md#section1721512551218). For details, see the specific component.
+>Events not listed in the preceding table are non-bubbling events, such as the [change event](js-components-basic-input.md#section1721512551218). For details, see the specific component.
**Table 1** Attributes of the BaseEvent object
@@ -268,7 +268,7 @@ Different from private events, universal events can be bound to most components.
-**Table 3** Attributes of the TouchEvent object
+**Table 3** TouchInfo
@@ -321,16 +321,9 @@ Different from private events, universal events can be bound to most components.
identifier8+
-number
-Unique identifier of a touch point on the screen. The value remains unchanged across the events triggered by finger movement on the screen.
-
-
**Table 4** Attributes of the SwipeEvent object \(inherited from BaseEvent\)
-**Table 6** Attributes of the KeyEvent object \(inherited from BaseEvent\)7+ \(Rich\)
+**Table 6** Attributes of the DragEvent object \(inherited from BaseEvent\)7+
@@ -481,3 +474,4 @@ export default {
}
}
```
+
diff --git a/en/application-dev/reference/arkui-js/js-components-common-gradient.md b/en/application-dev/reference/arkui-js/js-components-common-gradient.md
index f3e2c81c275ea02747579e1f339882c521391a01..e5458a9628650b97d64aac832b8c0a66ba946c74 100644
--- a/en/application-dev/reference/arkui-js/js-components-common-gradient.md
+++ b/en/application-dev/reference/arkui-js/js-components-common-gradient.md
@@ -1,5 +1,6 @@
# Gradient Styles
+The following four colors are supported: \#ff0000, \#ffff0000, rgb \(255, 0, 0\) and rgba \(255, 0, 0, 1\). At least two colors must be specified.
+
+- Name
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+
+
+
+
-- Example:
+- Example
+
+ 1. Gradient from top to bottom \(default\)
```
#gradient {
height: 300px;
width: 600px;
+ /* Gradient starts from red at the top to green at the bottom. */
+ background: linear-gradient(red, #00ff00);
}
```
- **Figure 1** Gradient from top to bottom \(default\)
+
+
+
+
-
-
-
-
-
-
-Keyframes , options: Options
-
-
-
-
-
-
-Rect
-
-
-ObserverParam
-
-Observer
-
-
-
-**Table 1** Rect object description 6+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-**Table 2** ObserverParam attributes6+
-
-
-
-
-
-
-
-
-
-**Table 3** Methods supported by the Observer object6+
-
-
-
-
-
-
-
-
-
-
-
-
-## this.$element\('_id_'\).animate\(Object, Object\)
-
-
-
-
-Style attributes .
-
-
-**Table 5** Style attributes
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-Transform
-
-
-
-
-
-The value of If there are only two frames, If there are more than two frames,
-
-**Table 6** Options
-
-
-
-
-
-
-
-
-
-
-
-
-Available values of the easing attribute .
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-**Table 7** Available values of the easing attribute
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+## animate
+
+
+
+
+
+ keyframes
+
+
+
+ Options
+
+ Options .
+
+
+ **Table 1** keyframes
+
+
+
+
+
+
- Style attributes .
+
+
+ **Table 2** Style attributes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Transform
+
+
+
+
+
+ The value of If there are only two frames, If there are more than two frames,
- Methods supported by the animation object
+ **Table 3** Options description
-
+
+
+
+
+
+
+
+
+
+
+
+ Available values of the easing attribute .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ **Table 4** Available values of the easing attribute
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Return values
+
+ The **animation** attributes are as follows.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Events supported by the animation object
+ Methods for animation
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Events for animation
-- Example code:
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
```
@@ -628,13 +522,59 @@ You can use the **animate\(keyframes: Keyframes, options: Options\)** method t
}
```
- 
+ 
+
+## getBoundingClientRect6+ ](#table1650917111414)
Obtains the size of the element and its position relative to the window.
+- Return values
+
+ **Table 5** Rect attributes6+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- Example
```
@@ -644,10 +584,88 @@ Obtains the size of the element and its position relative to the window.
```
-## this.$element\('_id_'\).createIntersectionObserver\(\)6+
+
+
+
+
+ ObserverParam
+
+
+
+
+ **Table 6** ObserverParam attributes6+
+
+
+
+
+
+
+
+
+
+- Return values
+
+ **Table 7** Methods supported by the Observer object6+
+
+
+
+
+
+
+
+
+
+
+
+
- Example
```
@@ -663,4 +681,3 @@ Gets notified of the visibility of an element on the current page.
observer.unobserve()
```
-
diff --git a/en/application-dev/reference/arkui-js/js-components-common-styles.md b/en/application-dev/reference/arkui-js/js-components-common-styles.md
index 3d8101ef286e7a4dc9d0ad607da1a3e4b5ce2a61..efa11d67495646d34ef6250230ca4fcdb6497f55 100644
--- a/en/application-dev/reference/arkui-js/js-components-common-styles.md
+++ b/en/application-dev/reference/arkui-js/js-components-common-styles.md
@@ -150,8 +150,8 @@ You can set component appearance in the **style** attribute or **.css** file
-
@@ -215,6 +215,8 @@ You can set component appearance in the **style** attribute or **.css** file
+ NOTE:
+
@@ -223,7 +225,7 @@ You can set component appearance in the **style** attribute or **.css** file
+
@@ -250,9 +252,11 @@ You can set component appearance in the **style** attribute or **.css** file
-
-
+
+
+background-image: url("/common/background.png") NOTE:
+
@@ -264,7 +268,7 @@ You can set component appearance in the **style** attribute or **.css** file
The The two
- The two
+ The two
-
-
-
-
-
-
-
-
-window-filter: blur(50%) window-filter: blur(10%), large_light NOTE:
-
+
@@ -380,7 +368,7 @@ You can set component appearance in the **style** attribute or **.css** file
+
A unitless number to set A valid width value
-
-
-
+
+
+
@@ -537,11 +525,11 @@ You can set component appearance in the **style** attribute or **.css** file
-
-
-
-
+
+
+
+
@@ -575,7 +563,7 @@ You can set component appearance in the **style** attribute or **.css** file
+
@@ -588,7 +576,7 @@ You can set component appearance in the **style** attribute or **.css** file
+
@@ -601,10 +589,10 @@ You can set component appearance in the **style** attribute or **.css** file
-
-
-
+
+
+
+
@@ -614,7 +602,7 @@ You can set component appearance in the **style** attribute or **.css** file
-
-## Example Code7+
@@ -570,8 +570,8 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
})
},
drag(e){
- this.left = e.dragevent.globalX;
- this.top = e.dragevent.globalY;
+ this.left = e.globalX;
+ this.top = e.globalY;
},
dragend(e){
prompt.showToast({
@@ -581,7 +581,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
}
```
- 
+ 
```
@@ -618,8 +618,8 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
top:0,
},
drag(e){
- this.left = e.dragevent.globalX;
- this.top = e.dragevent.globalY;
+ this.left = e.globalX;
+ this.top = e.globalY;
},
dragenter(e){
prompt.showToast({
@@ -644,7 +644,7 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
}
```
- 
+ 
5. Pinching7+
@@ -700,6 +700,5 @@ In addition to the methods in [Universal Methods](js-components-common-methods.
}
```
- 
-
+ 
diff --git a/en/application-dev/reference/arkui-js/js-components-container-form.md b/en/application-dev/reference/arkui-js/js-components-container-form.md
index 7508a85a1ab09f220c05fedda318ae24e444d09d..23d52f34982ef8067457fac1bb81a02b85c471e8 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-form.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-form.md
@@ -2,9 +2,6 @@
The **** component allows the content in **input** elements to be submitted and reset.
-> **NOTE:**
->This component is supported since API version 6.
-
## Required Permissions
-## Method** is a child component of **<[list](js-components-container-list.md)\>** and is used to group items in a list. By default, the width of **** is equal to that of ****.
-> **NOTE:**
->- To use this component, you must set the **columns** attribute of the parent component **** to **1**. Otherwise, **** is not displayed.
->- You can customize the width of each ****. However, if you retain the default value **stretch** of **align-items** for the parent component ****, the width of **** is equal to that of ****. You can set **align-items** to other values rather than **stretch** to make the customized **** width take effect.
+- To use this component, you must set the **columns** attribute of the parent component **** to **1**. Otherwise, **** is not displayed.
+- You can customize the width of each ****. However, if you retain the default value **stretch** of **align-items** for the parent component ****, the width of **** is equal to that of ****. You can set **align-items** to other values rather than **stretch** to make the customized **** width take effect.
-## Permission List
-## Event
-## Method** is a child component of the **<[list](js-components-container-list.md)\>** component and is used to display items in a list.
+**** is a child component of the **<[list](js-components-container-list.md)\>** component and is used to display items in a list. You can customize the width of each ****. However, if you retain the default value **stretch** of **align-items** for the parent component ****, the width of **** is equal to that of ****. You can set **align-items** to other values rather than **stretch** to make the customized **** width take effect.
-> **NOTE:**
->You can customize the width of each ****. However, if you retain the default value **stretch** of **align-items** for the parent component ****, the width of **** is equal to that of ****. You can set **align-items** to other values rather than **stretch** to make the customized **** width take effect.
-
-## Permission List
+
@@ -75,17 +72,6 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
-
-
-
-
-
@@ -101,7 +87,7 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
-## Style
-## Event
-## Method** component provides a list container that presents a series of list items arranged in a column with the same width. Lists support presentations of the same data in a multiple and coherent row style, for example, images and texts.
-## Permission List
-
-
-
-
- NOTE:
-
-
-
-
-
-
@@ -200,18 +176,6 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
-
-
-
-
-
@@ -220,8 +184,8 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
-
+
+
The value you set is greater than the index of the last item. The
-## Style
+
@@ -308,7 +272,7 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
+
@@ -410,7 +374,7 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
-## Event
-## Method
+
-
-## Example Code
-
-
- {{$item.title}}
- {{$item.date}}
-
-
-
-```
-
-```
-// index.js
-export default {
- data: {
- todolist: [{
- title: 'Prepare for the interview',
- date: 'Dec 31, 2021 10:00:00',
- }, {
- title: 'Watch the movie',
- date: 'Dec 31, 2021 20:00:00',
- }],
- },
-}
-```
-
-```
-/* index.css */
-.container {
- display: flex;
- justify-content: center;
- align-items: center;
- left: 0px;
- top: 0px;
- width: 454px;
- height: 454px;
-}
-.todo-wrapper {
- width: 454px;
- height: 300px;
-}
-.todo-item {
- width: 454px;
- height: 80px;
- flex-direction: column;
-}
-.todo-title {
- width: 454px;
- height: 40px;
- text-align: center;
-}
-```
-
-
-
diff --git a/en/application-dev/reference/arkui-js/js-components-container-panel.md b/en/application-dev/reference/arkui-js/js-components-container-panel.md
index 049e0d5f647eadec0b2f695da6cbddbb8885474b..6d45f57ae91364b353ffbf8874aee8027b36a297 100644
--- a/en/application-dev/reference/arkui-js/js-components-container-panel.md
+++ b/en/application-dev/reference/arkui-js/js-components-container-panel.md
@@ -2,14 +2,11 @@
The **** component is a slidable panel. It provides a lightweight content display window with flexible sizes. The **** component pops up when it is displayed.
-> **NOTE:**
->This component is supported since API version 5.
-
-## Child Component
+
-## Event
-## Method
-## Example Code** component is used to display a pop-up to offer instructions after a user clicks a bound control.
-## Permission List** can have only one child component5+ .
-## Attribute
-## Method** component is used to pull down to refresh the page.
-## Permission List
-## Style
-## Event
-## Method** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
-## Permission List** component displays a step in the step navigator. This component is the child component of ****.
-> **NOTE:**
->This component is supported since API version 5.
-
-## Permission List
-## Style
+
-## Method** component provides a step navigator. When multiple steps are required to complete a task, you can use the **** component to navigate your users through the whole process.
-> **NOTE:**
->This component is supported since API version 5.
-
-## Permission List** component is supported.
> **NOTE:**
>Steps in the **** are sorted according to the sequence of its **** child components.
-## Attribute
-## Style** component fills entire space of its container. To optimize user experience, it is recommended that the container should be as large as the application window in size, or should be the root component.
-## Event
-## Method
-## Example Code** component provides a container that allows users to switch among child components by swiping operations.
-## Permission List** are supported.
-## Attribute
-
-
-
-
- NOTE:
-
@@ -169,7 +156,7 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
-## Style
-## Event
-## Method
-## Example Code** is a child component of **<[tabs](js-components-container-tabs.md)\>** and is used to provide the area to display tab labels. Its child components are horizontally arranged.
-## Permission List
-## Style** is a child component of [](js-components-container-tabs.md) and is used to provide the area for displaying the tab content. By default, its height is such that all the remaining space of the **** component is filled. The child components are arranged horizontally. When **** is used as a child element in a container, the length on the main axis direction must be specified. Otherwise, the child element cannot be displayed.
-## Permission List
-## Style** component provides a tab container.
-## Permission List** can wrap at most one **<[tab-bar](js-components-container-tab-bar.md)\>** and at most one **<[tab-content](js-components-container-tab-content.md)\>**.
-## Attribute
-## Style
-## Example Code
+
+
+
+
+
-
+
+
+
+
+
+
+
+
** is the child component of the **** container.
-## Permission List
+
@@ -46,7 +46,7 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
+
@@ -57,7 +57,7 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
+
@@ -68,7 +68,7 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
+
@@ -90,13 +90,13 @@ In addition to the attributes in [Universal Attributes](js-components-common-at
+
-## Style
-
@@ -134,7 +134,7 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
-
@@ -146,7 +146,7 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
-
@@ -158,7 +158,7 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
-
@@ -170,7 +170,7 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
-
@@ -181,8 +181,8 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
-
+
@@ -193,13 +193,13 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
-
-
-
-
-
-
+
+
+
+
+
+
+
@@ -210,7 +210,7 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
+
@@ -221,7 +221,7 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
+
@@ -232,36 +232,36 @@ In addition to the styles in [Universal Styles](js-components-common-styles.md)
+
> **NOTE:**
->- Width-related styles are not supported.
+>Width-related styles are not supported.
-## Event
-
+
Element text
-
+
Element text
@@ -302,3 +302,5 @@ export default {
}
```
+
+
diff --git a/en/application-dev/reference/arkui-js/js-components-grid-container.md b/en/application-dev/reference/arkui-js/js-components-grid-container.md
index 8f3d7dfbeabd71c07d1ffc46417c23d469b44a98..9bec017c1a2eb9018b69108c352b300a43055671 100644
--- a/en/application-dev/reference/arkui-js/js-components-grid-container.md
+++ b/en/application-dev/reference/arkui-js/js-components-grid-container.md
@@ -1,8 +1,8 @@
# grid-container** component is the root container of the grid layout. Within the root container, you can use **** and **** for the grid layout.
+The **** component is the root container of the grid layout. Within the root container, you can use **** and **** for the grid layout.
-## Permission List** component is supported.
-## Attribute
> **NOTE:**
+>
>- The px unit is applicable when **autoDesignWidth** is set to **true** in the "js" tag. 6+
-## Style
-## Event** component is a container used as a child component of ****. Each **** component is arranged horizontally with **flex**-related styles. By default, items in the **** component are packed towards the start row and aligned to the start of the cross axis. You can set the items to be displayed in multiple axes.
-## Permission List** component is supported.
-## Attribute
> **NOTE:**
->- Width-related styles are not supported.
+>Width-related styles are not supported.
-## Event** component provides a video player.
> "configChanges": ["orientation"]
> ```
-## Permission List
-## Style
-## Event
+
-## Method
+
+> **NOTE:**
+>The methods in the above table can be called after the **attached** callback is invoked.
+
diff --git a/en/application-dev/reference/arkui-js/js-components-svg-animate.md b/en/application-dev/reference/arkui-js/js-components-svg-animate.md
index 24b10e8f27bf7b57f435aa7855e2c694bfe3ea79..751dbe4adb724775bc0cd287b47f29c25cbd2339 100644
--- a/en/application-dev/reference/arkui-js/js-components-svg-animate.md
+++ b/en/application-dev/reference/arkui-js/js-components-svg-animate.md
@@ -3,9 +3,9 @@
The **** component is used to apply animation to an **** component.
> **NOTE:**
->The APIs of this module are supported since API version 7.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Permission List** component is used to apply the path animation.
+The **** component is used to define the animation along a path.
> **NOTE:**
->The APIs of this module are supported since API version 7.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Permission List** component is used to apply a transform animation a
, , , , , , ,
> **NOTE:**
->The APIs of this module are supported since API version 7.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Permission List** component is used to draw circles.
> **NOTE:**
->The APIs of this module are supported since API version 7.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Permission List
diff --git a/en/application-dev/reference/arkui-js/js-components-svg-common-attributes.md b/en/application-dev/reference/arkui-js/js-components-svg-common-attributes.md
index 8d192ead2f2f1ebcc560f569e1e68591b9bc9768..41708e4000c2be922448df292ce6cb1fad608f69 100644
--- a/en/application-dev/reference/arkui-js/js-components-svg-common-attributes.md
+++ b/en/application-dev/reference/arkui-js/js-components-svg-common-attributes.md
@@ -1,5 +1,8 @@
# Universal Attributes
+
@@ -43,7 +46,7 @@
+
@@ -54,7 +57,7 @@
+
@@ -137,7 +140,7 @@
+
@@ -165,7 +168,7 @@
-
+
** component is used to draw oval shapes.
> **NOTE:**
->The APIs of this module are supported since API version 7.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Permission List
diff --git a/en/application-dev/reference/arkui-js/js-components-svg-line.md b/en/application-dev/reference/arkui-js/js-components-svg-line.md
index 248eedba9b85be7cb1ec8af29a6617711ce101c8..6ec9f30e742e29c148f4e312afcc31feb6c55bea 100644
--- a/en/application-dev/reference/arkui-js/js-components-svg-line.md
+++ b/en/application-dev/reference/arkui-js/js-components-svg-line.md
@@ -3,9 +3,9 @@
The **** component is used to draw a line.
> **NOTE:**
->The APIs of this module are supported since API version 7.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Permission List** component is used to draw a path.
> **NOTE:**
->The APIs of this module are supported since API version 7.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Permission List
diff --git a/en/application-dev/reference/arkui-js/js-components-svg-polygon.md b/en/application-dev/reference/arkui-js/js-components-svg-polygon.md
index 7c63ed5f485e874c116621dffbff91c1504a3fbd..378be8a30a6fa4a0124d113a64b2eead3b19a79a 100644
--- a/en/application-dev/reference/arkui-js/js-components-svg-polygon.md
+++ b/en/application-dev/reference/arkui-js/js-components-svg-polygon.md
@@ -3,9 +3,9 @@
The **** component is used to draw a polygon.
> **NOTE:**
->The APIs of this module are supported since API version 7.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Permission List
diff --git a/en/application-dev/reference/arkui-js/js-components-svg-polyline.md b/en/application-dev/reference/arkui-js/js-components-svg-polyline.md
index 7929ec53824520ec869d851a8b071371b1e0c3a5..ddefca98447ae302fa9036bec278c8d1ebc46c85 100644
--- a/en/application-dev/reference/arkui-js/js-components-svg-polyline.md
+++ b/en/application-dev/reference/arkui-js/js-components-svg-polyline.md
@@ -3,9 +3,9 @@
The **** component is used to draw a polyline.
> **NOTE:**
->The APIs of this module are supported since API version 7.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Permission List** component is used to draw rectangles and rounded rectangles.
> **NOTE:**
->The APIs of this module are supported since API version 7.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
-## Permission List
diff --git a/en/application-dev/reference/arkui-js/js-components-svg-text.md b/en/application-dev/reference/arkui-js/js-components-svg-text.md
index 6dee791d248041af39925b9440c1152e1552a86b..4b9887758b264f6c9134537190ed62dae5751d83 100644
--- a/en/application-dev/reference/arkui-js/js-components-svg-text.md
+++ b/en/application-dev/reference/arkui-js/js-components-svg-text.md
@@ -3,12 +3,12 @@
The **** component is used to display a piece of textual information.
> **NOTE:**
->- The APIs of this module are supported since API version 7.
+>- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>- The text content must be written in the content area. The **tspan** sub-element label can be nested to segment the text content. The **textPath** sub-element label can be nested to draw the text content based on the specified path.
>- **** can be nested only by the parent element label **svg**.
>- Only the default font **sans-serif** is supported.
-## Permission List
+
@@ -140,7 +140,7 @@ The attributes in the following table are supported.
+
@@ -173,7 +173,7 @@ The attributes in the following table are supported.
+
** component is used to draw text along the path.
> **NOTE:**
->- The APIs of this module are supported since API version 7.
+>- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
>- Draws text based on the specified path. The **tspan** child component can be nested for segmenting.
>- **** can be nested only by the parent element label **svg**.
-## Permission List
+
+
+
+
+
@@ -97,7 +108,7 @@ The attributes in the following table are supported.
+
@@ -108,7 +119,7 @@ The attributes in the following table are supported.
+
@@ -141,7 +152,7 @@ The attributes in the following table are supported.
+
** child component can be nested.
>- **** can be nested only by the parent element label **svg**.
-## Permission List
+
@@ -135,7 +135,7 @@ The attributes in the following table are supported.
+
@@ -168,7 +168,7 @@ The attributes in the following table are supported.
+
** is a basic container, which is used as the root node of the SVG and can be nested in the SVG.
+The **** component is a basic container. It can be used as the root node of an SVG document or be used to nest an SVG fragment into an SVG document.
> **NOTE:**
->The APIs of this module are supported since API version 7.
->Constraints: The width and height must be defined for the **** parent component or **** component. Otherwise, the component is not drawn.
+>- This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+>- The width and height must be defined for the **** parent component or **** component. Otherwise, the component is not drawn.
-## Permission List
diff --git a/en/application-dev/reference/arkui-js/js-components.md b/en/application-dev/reference/arkui-js/js-components.md
index 775b92b37f0f963d68cb1d87ad7607c6f7a06c76..048e5afb46e3d8765ede56525ebe1de808b6ec48 100644
--- a/en/application-dev/reference/arkui-js/js-components.md
+++ b/en/application-dev/reference/arkui-js/js-components.md
@@ -8,10 +8,9 @@
- **[Media Components](js-components-media.md)**
-- **[Canvas Components \(Rich\)](js-components-canvas.md)**
+- **[Canvas Components ](js-components-canvas.md)**
- **[Grid](js-components-grid.md)**
- **[SVG Components](js-svg.md)**
-
diff --git a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
index 524f685ba59c096159811425aedfa3c2a94d5d43..0eaa85d778d22dd9395c16f40d45ec60284bc469 100644
--- a/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
+++ b/en/application-dev/reference/arkui-js/js-offscreencanvasrenderingcontext2d.md
@@ -1,16 +1,17 @@
# OffscreenCanvasRenderingContext2D
+
-
+
+ ```
+
+ ```
+ //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);
+ }
+ }
+ ```
+
+ 
-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);
+## Methods
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Return values
+
+
+
+
+
+
-offCanvas2.filter = 'contrast(200%)';
-offCanvas2.drawImage(img, 100, 300, 100, 100);
-var bitmap = offscreen.transferToImageBitmap();
-ctx.transferFromImageBitmap(bitmap);
-```
+- Example
-
+ ```
+
+
+ In path:{{textValue}}
+
+ ```
+
+ ```
+ // 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);
+ }
+ }
+ ```
+
+ 
+
+
+### isPointInStroke
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Return values
+
+
+
+
+
+
-## Methods
+ In path:{{textValue}}
+
+ ```
+
+ ```
+ // 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);
+ }
+ }
+ ```
+
+ 
+
+
+### resetTransform
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+- Example
-- isPointInPath example
-
-
-
-```
-
-
- In path:{{textValue}}
-
-
- In path:{{textValue}}
-
-
+ In path:{{textValue}}
+
+ ```
+
+ ```
+ //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 = 'gray';
+ offscreenCanvasCtx.fillRect(40, 40, 50, 20);
+ offscreenCanvasCtx.fillRect(40, 90, 50, 20);
+
+ // Non-skewed rectangles
+ offscreenCanvasCtx.resetTransform();
+ offscreenCanvasCtx.fillStyle = 'red';
+ offscreenCanvasCtx.fillRect(40, 40, 50, 20);
+ offscreenCanvasCtx.fillRect(40, 90, 50, 20);
+
+ var bitmap = offscreen.transferToImageBitmap();
+ canvas.transferFromImageBitmap(bitmap);
+ }
+ }
+ ```
+
+ 
diff --git a/en/application-dev/reference/arkui-js/js-web-development-like.md b/en/application-dev/reference/arkui-js/js-web-development-like.md
deleted file mode 100644
index 7e03ff8a6f32e8c64304b9ac13742e61410718a1..0000000000000000000000000000000000000000
--- a/en/application-dev/reference/arkui-js/js-web-development-like.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# JavaScript-based Web-like Development Paradigm
+## Axis enums
+
+
+
+
+
+
+
## ItemAlign Enums('varA', AppStorage.Get('varA') + 1)
- })
- Button(`lang: ${this.lang}`)
- .onClick(() => {
- if (this.lang === 'zh') {
- AppStorage.Set('languageCode', 'en')
- } else {
- AppStorage.Set('languageCode', 'zh')
- }
- this.label = (this.lang === 'zh') ? 'Number' : 'Count'
- })
- }
- }
-}
-```
-
-Each time the user clicks the Count button, the value of **this.varA** increases. This variable is synchronized with **varA** in the **AppStorage**. Each time the user clicks the icon indicating the current language, the value of **languageCode** in the **AppStorage** is changed. The change is synchronized to the **this.lang** variable.
-
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
index 311f155eafc0214910546e3ede65e812599c38bd..d005082951b2e5846084878df9a411a3d1fa021b 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-blank.md
@@ -1,9 +1,9 @@
-# Blank** component supports automatic filling of the empty part of the container along the main axis.
+# Blank** or ****.
+>This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+The **** component supports automatic filling of the empty part of the container along the main axis. This component is valid only when the parent component is **** or ****.
## Required Permissions** component represents a component that can trigger actions.
## Required Permissions** component display proportions in a ring chart.
+The **** component displays proportions in a chart.
+
+## Required Permissions
+
+
+
+
+
+
+
+
+
+
+
+ DataPanelType
+
+
+
+
+
+
+-
+
+
+
+
+
** component is used to separate content blocks and content elements.
@@ -101,5 +104,5 @@ struct DividerExample {
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
new file mode 100644
index 0000000000000000000000000000000000000000..1f6b9bc92c5d1508850b1ee64dd90088e8652c1b
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-gauge.md
@@ -0,0 +1,152 @@
+# Gauge
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Attributes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Example** component is used to render and display images.
@@ -12,7 +15,7 @@ None
## APIs
+
+
+
+
+
@@ -313,7 +325,7 @@ struct ImageExample1 {
}
```
-
+
```
// Image2
@@ -382,7 +394,7 @@ struct ImageExample2 {
}
```
-
+
```
// Image3
@@ -444,5 +456,5 @@ struct ImageExample3 {
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
index d2b5813ea5e0ae210640b287a267f96b1bae5b9b..af1a3aaaa8f9297be8efbb28d8455d4c46f5ab5e 100644
--- a/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-imageanimator.md
@@ -1,7 +1,14 @@
-# ImageAnimator** component enables images to be played frame by frame. The list of images to be played can be configured, and the duration of each image can be configured.
+## Required Permissions** component displays single-line scrolling text.
+
+## Required Permissions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Events
+
+
+
+
+
+
+
+
+
+## Example** component is used to provide a progress bar that displays the progress of content loading or an operation.
-## Applicable Devices
-
-
-
-
-
-
-
-
-
-
+None
## Child Components** component is used to display QR code information.
-## Permissions Required** component provides a rating bar.
+## Required Permissions** component is used to quickly adjust settings, such as the volume and brightness.
+## Required Permissions
+
+ Axis
+
+
+
+
@@ -108,6 +126,8 @@ Slider\(value:\{value?: number, min?: number, max?: number, step?: number, style
## Attributes
component is used to display a paragraph of textual information. It can be used only as a child component in the **** component.
@@ -46,7 +49,7 @@ Span\(content: string\)
## Attributes
@@ -89,6 +92,9 @@ The universal attribute methods support only the common text style.
Among all the universal events, only the click event is supported.
+> **NOTE:**
+>As the **** component does not have size information, the **target** attribute of the **ClickEvent** object returned by the click event is invalid.
+
## Example** component is used to display a paragraph of textual information.
diff --git a/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
new file mode 100644
index 0000000000000000000000000000000000000000..8ea07e9d812d3895368a806b700121997598e308
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-textarea.md
@@ -0,0 +1,186 @@
+# TextArea
+
+
+
+
+
+
+
+
+
+
+
+
+## Attributes
+
+
+
+
+
+
+
+
+
+
+FontWeight ,
+
+FontStyle
+
+
+
+
+
+
+
+
+
+
+
+
+
+- TextAlign enumeration description
+
+
+
+
+
+
+
+
+
+
+
+
+## Events
+
+
+
+
+
+## Example** component provides single-line text input.
+
+## Required Permissions
+
+
+
+
+
+
+
+
+
+
+
+
+## Attributes
+
+
+
+
+InputType
+
+
+
+
+
+
+
+
+
+FontWeight ,
+
+FontStyle
+
+
+
+
+EnterKeyType
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+## Events
+
+
+
+EnterKeyType ) => void)
+
+
+
+
+
+## Example
+
+
+
+
+
+ ToggleType
+
+
+
+
+
+
+
+
+ NOTE:
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+## Attributes
+
+
+
+
+
+
+
+
+
+
+
+ NOTE:
+
+
+## Events
+
+
+
+
+
+## Example GestureEvent ) => void)
+LongPressGestureEvent ) => void)
GestureEvent ) => void)
+LongPressGestureEvent ) => void)
+- 8+
+
+ Inherited from [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
+
+
+
+
+
+
+
+
+
+
## Example GestureEvent ) => void)
+PanGestureEvent ) => void)
+
GestureEvent ) => void)
+PanGestureEvent ) => void)
GestureEvent ) => void)
+PanGestureEvent ) => void)
+
+- 8+
+
+ Inherited from [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
+
+
+
+
+
+
+
+
+
+
+
+
+
## Example GestureEvent ) => void)
+PinchGestureEvent ) => void)
GestureEvent ) => void)
+PinchGestureEvent ) => void)
GestureEvent ) => void)
+PinchGestureEvent ) => void)
+- 8+
+
+ Inherited from [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## Example GestureEvent ) => void)
+RotationGestureEvent ) => void)
GestureEvent ) => void)
+RotationGestureEvent ) => void)
GestureEvent ) => void)
+RotationGestureEvent ) => void)
+- 8+
+
+ Inherited from [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## Example
+
+
+
+
+
+
+
+
+
+
+ SwipeDirection
+
+
+
+
+
+
+
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+## Events
+
+SwipeGestureEvent ) => void)
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+## Example GestureEvent ) => void)
+TapGestureEvent ) => void)
+- 8+
+
+ Inherited from [GestureEvent](ts-gesture-settings.md#table290mcpsimp).
+
+
## Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Attributes
+
+
+
+fillStyle
+CanvasGradient | CanvasPattern
+
+
+When the type is When the type is createLinearGradient method. When the type is createPattern method to create a pattern. lineWidth
+
+
+
+strokeStyle
+CanvasGradient | CanvasPattern
+
+
+When the type is When the type is createLinearGradient method. When the type is createPattern method to create a pattern. lineCap
+
+
+
+lineJoin
+
+
+
+miterLimit
+
+
+
+font
+
+
+
+
+(Optional) (Optional)
+(Optional) (Optional) (Optional) (Optional) textAlign
+
+
+
+ NOTE:
+
textBaseline
+
+
+
+globalAlpha
+
+
+
+lineDashOffset
+
+
+
+globalCompositeOperation
+
+
+
+shadowBlur
+
+
+
+shadowColor
+
+
+
+shadowOffsetX
+
+
+
+shadowOffsetY
+
+
+
+imageSmoothingEnabled
+
+
+
+
+
+
+
+
+
+> **NOTE:**
+>The value of the **** type can be in 'rgb\(255, 255, 255\)', 'rgba\(255, 255, 255, 1.0\)', or '\#FFFFFF' format.
+
+### fillStyle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+@Entry
+@Component
+struct GlobalCompositeOperation {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.fillStyle = 'rgb(255,0,0)'
+ this.context.fillRect(20, 20, 50, 50)
+ this.context.globalCompositeOperation = 'source-over'
+ this.context.fillStyle = 'rgb(0,0,255)'
+ this.context.fillRect(50, 50, 50, 50)
+ this.context.fillStyle = 'rgb(255,0,0)'
+ this.context.fillRect(120, 20, 50, 50)
+ this.context.globalCompositeOperation = 'destination-over'
+ this.context.fillStyle = 'rgb(0,0,255)'
+ this.context.fillRect(150, 50, 50, 50)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
+```
+
+
+
+### shadowBlur
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct FillRect {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.fillRect(0,30,100,100)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### strokeRect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct StrokeRect {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.strokeRect(30, 30, 200, 150)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### clearRect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct ClearRect {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.fillStyle = 'rgb(0,0,255)'
+ this.context.fillRect(0,0,500,500)
+ this.context.clearRect(20,20,150,100)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### fillText
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct FillText {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.font = '30px sans-serif'
+ this.context.fillText("Hello World!", 20, 100)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### strokeText
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct StrokeText {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.font = '55px sans-serif'
+ this.context.strokeText("Hello World!", 20, 60)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### measureText
+
+
+
+
+
+
+
+
+
+
+
+
+- Return values
+
+
+
+
+
+
+
+- **TextMetrics** attributes
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct MeasureText {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.font = '50px sans-serif'
+ this.context.fillText("Hello World!", 20, 100)
+ this.context.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### stroke
+
+
+
+
+
+ Path2D
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Stroke {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.moveTo(25, 25)
+ this.context.lineTo(25, 105)
+ this.context.strokeStyle = 'rgb(0,0,255)'
+ this.context.stroke()
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### beginPath
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct MoveTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.beginPath()
+ this.context.moveTo(10, 10)
+ this.context.lineTo(280, 160)
+ this.context.stroke()
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### lineTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct LineTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.beginPath()
+ this.context.moveTo(10, 10)
+ this.context.lineTo(280, 160)
+ this.context.stroke()
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### closePath
+
+
+
+
+
+ ImageBitmap
+
+
+ ImageBitmap .
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct CreatePattern {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ var pattern = this.context.createPattern(this.img, 'repeat')
+ this.context.fillStyle = pattern
+ this.context.fillRect(0, 0, 200, 200)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### bezierCurveTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct BezierCurveTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.beginPath()
+ this.context.moveTo(10, 10)
+ this.context.bezierCurveTo(20, 100, 200, 100, 200, 20)
+ this.context.stroke()
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### quadraticCurveTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct QuadraticCurveTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.beginPath();
+ this.context.moveTo(20, 20);
+ this.context.quadraticCurveTo(100, 100, 200, 20);
+ this.context.stroke();
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### arc
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Arc {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.beginPath()
+ this.context.arc(100, 75, 50, 0, 6.28)
+ this.context.stroke()
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### arcTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct ArcTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.moveTo(100, 20);
+ this.context.arcTo(150, 20, 150, 70, 50);
+ this.context.stroke();
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### ellipse
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Ellipse {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.beginPath()
+ this.context.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true)
+ this.context.stroke()
+ })
+ Button('back')
+ .onClick(() => {
+ router.back()
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### rect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Rect {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
+ this.context.stroke()
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### fill
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Rotate {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
+ this.context.fillRect(70, 20, 50, 50)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### scale
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Scale {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.strokeRect(10, 10, 25, 25)
+ this.context.scale(2, 2) // Scale to 200%
+ this.context.strokeRect(10, 10, 25, 25)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### transform
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Transform {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.fillStyle = 'rgb(0,0,0)'
+ this.context.fillRect(0, 0, 100, 100)
+ this.context.transform(1, 0.5, -0.5, 1, 10, 10)
+ this.context.fillStyle = 'rgb(255,0,0)'
+ this.context.fillRect(0, 0, 100, 100)
+ this.context.transform(1, 0.5, -0.5, 1, 10, 10)
+ this.context.fillStyle = 'rgb(0,0,255)'
+ this.context.fillRect(0, 0, 100, 100)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### setTransform
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct SetTransform {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.fillStyle = 'rgb(255,0,0)'
+ this.context.fillRect(0, 0, 100, 100)
+ this.context.setTransform(1,0.5, -0.5, 1, 10, 10)
+ this.context.fillStyle = 'rgb(0,0,255)'
+ this.context.fillRect(0, 0, 100, 100)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### translate
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Translate {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.fillRect(10, 10, 50, 50)
+ this.context.translate(70, 70)
+ this.context.fillRect(10, 10, 50, 50)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### drawImage
+
+
+
+
+
+ ImageBitmap
+
+
+ ImageBitmap .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct ImageExample {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true);
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+ private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.drawImage( this.img,0,0,500,500,0,0,400,200);
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### createImageData
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### createImageData
+
+
+
+
+
+
+
+
+
+
+
+
+### getImageData
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### putImageData
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct PutImageData {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ var imageData = this.context.createImageData(100, 100)
+ for (var i = 0; i < imageData.data.length; i += 4) {
+ imageData.data[i + 0] = 255
+ imageData.data[i + 1] = 0
+ imageData.data[i + 2] = 255
+ imageData.data[i + 3] = 255
+ }
+ this.context.putImageData(imageData, 10, 10)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### restore
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct CreateLinearGradient {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private gra:CanvasGradient = new CanvasGradient()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ var grad = this.context.createLinearGradient(50,0, 300,100)
+ this.gra.addColorStop(0.0, 'red')
+ this.gra.addColorStop(0.5, 'white')
+ this.gra.addColorStop(1.0, 'green')
+ this.context.fillStyle = grad
+ this.context.fillRect(0, 0, 500, 500)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### createRadialGradient
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct CreateRadialGradient {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private gra:CanvasGradient = new CanvasGradient()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ var grad = this.context.createRadialGradient(200,200,50, 200,200,200)
+ this.gra.addColorStop(0.0, 'red')
+ this.gra.addColorStop(0.5, 'white')
+ this.gra.addColorStop(1.0, 'green')
+ this.context.fillStyle = grad
+ this.context.fillRect(0, 0, 500, 500)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+## CanvasPattern** component can be used to customize drawings.
+
+## Required Permissions
+
+
+
+
+
+
+
+## Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Page45 {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private gra:CanvasGradient = new CanvasGradient()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ var grad = this.context.createLinearGradient(50,0, 300,100)
+ this.gra.addColorStop(0.0, 'red')
+ this.gra.addColorStop(0.5, 'white')
+ this.gra.addColorStop(1.0, 'green')
+ this.context.fillStyle = grad
+ this.context.fillRect(0, 0, 500, 500)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
new file mode 100644
index 0000000000000000000000000000000000000000..6c7546ec9f56539adefca6e30cdd3bbbd5075cbc
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagebitmap.md
@@ -0,0 +1,109 @@
+# ImageBitmap
+
+
+
+
+
+
+
+
+
+
+
+
+## Attributes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Example
+
+```
+@Entry
+@Component
+struct DrawImageExample {
+ private settings:RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.context.drawImage( this.img,0,0,400,200)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
new file mode 100644
index 0000000000000000000000000000000000000000..43aa9147a1cad5c71649bac3f948aa1fc09675b6
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-imagedata.md
@@ -0,0 +1,42 @@
+# ImageData
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
new file mode 100644
index 0000000000000000000000000000000000000000..b2a63e4de072dc9aebade58e2caeec761a522240
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-lottie.md
@@ -0,0 +1,1343 @@
+# Lottie
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## lottie.destroy
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ import lottie from 'lottie-web'
+
+ @Entry
+ @Component
+ struct Index {
+ private controller: CanvasRenderingContext2D = new CanvasRenderingContext2D()
+ private animateName: string = "animate"
+ private animatePath: string = "common/lottie/data.json"
+ private animateItem: any = null
+
+ private onPageHide(): void {
+ console.log('onPageHide')
+ lottie.destroy()
+ }
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.controller)
+ .width('30%')
+ .height('20%')
+ .backgroundColor('#0D9FFB')
+ .onAppear(() => {
+ console.log('canvas onAppear');
+ this.animateItem = lottie.loadAnimation({
+ container: this.controller,
+ renderer: 'canvas',
+ loop: true,
+ autoplay: true,
+ name: this.animateName,
+ path: this.animatePath,
+ })
+ })
+
+ Animator('__lottie_ets') // declare Animator('__lottie_ets') when use lottie
+ Button('load animation')
+ .onClick(() => {
+ if (this.animateItem != null) {
+ this.animateItem.destroy()
+ this.animateItem = null
+ }
+ this.animateItem = lottie.loadAnimation({
+ container: this.controller,
+ renderer: 'canvas',
+ loop: true,
+ autoplay: true,
+ name: this.animateName,
+ path: this.animatePath,
+ initialSegment: [10, 50],
+ })
+ })
+
+ Button('destroy animation')
+ .onClick(() => {
+ lottie.destroy(this.animateName)
+ this.animateItem = null
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+## lottie.play
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ lottie.play(this.animateName)
+ ```
+
+
+## lottie.pause
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ lottie.pause(this.animateName)
+ ```
+
+
+## lottie.togglePause
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ lottie.togglePause(this.animateName)
+ ```
+
+
+## lottie.stop
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ lottie.stop(this.animateName)
+ ```
+
+
+## lottie.setSpeed
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ lottie.setSpeed(5, this.animateName)
+ ```
+
+
+## lottie.setDirection
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ lottie.setDirection(-1, this.controlName)
+ ```
+
+
+## AnimationItem
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## AnimationItem.play
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.anim.play()
+ ```
+
+
+## AnimationItem.destroy
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.anim.destroy()
+ ```
+
+
+## AnimationItem.pause
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.anim.pause()
+ ```
+
+
+## AnimationItem.togglePause
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.anim.togglePause()
+ ```
+
+
+## AnimationItem.stop
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.anim.stop()
+ ```
+
+
+## AnimationItem.setSpeed
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.anim.setSpeed(5);
+ ```
+
+
+## AnimationItem.setDirection
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.anim.setDirection(-1)
+ ```
+
+
+## AnimationItem.goToAndStop
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ // Set the animation to stop at the specified frame.
+ this.anim.goToAndStop(25, true)
+ // Set the animation to stop at the specified time progress.
+ this.anim.goToAndStop(300, false, this.animateName)
+ ```
+
+
+## AnimationItem.goToAndPlay
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ // Set the animation to start from the specified frame.
+ this.anim.goToAndPlay(25, true)
+ // Set the animation to start from the specified time progress.
+ this.anim.goToAndPlay(300, false, this.animateName)
+ ```
+
+
+## AnimationItem.playSegments
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ // Set the animation to play the specified segment.
+ this.anim.playSegments([10, 20], false)
+ // Set the animation to play the specified segment list.
+ this.anim.playSegments([[0, 5], [20, 30]], true)
+ ```
+
+
+## AnimationItem.resetSegments
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.anim.resetSegments(true)
+ ```
+
+
+## AnimationItem.resize
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.anim.setSubframe(false)
+ ```
+
+
+## AnimationItem.getDuration
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.anim.setSubframe(true)
+ ```
+
+
+## AnimationItem.addEventListener\(name: AnimationEventName, callback: AnimationEventCallback\): \(\) =\> void
+
+Adds an event listener. After the event is complete, the specified callback function is triggered. This method returns the function object that can delete the event listener.
+
+- Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ private callbackItem: any = function() {
+ console.log("grunt loopComplete")
+ }
+ let delFunction = this.animateItem.addEventListener('loopComplete', this.callbackItem)
+
+ // Delete the event listener.
+ delFunction()
+ ```
+
+
+## AnimationItem.removeEventListener\(name: AnimationEventName, callback?: AnimationEventCallback\): void
+
+Deletes an event listener.
+
+- Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ this.animateItem.removeEventListener('loopComplete', this.callbackItem)
+ ```
+
+
+## AnimationItem.triggerEvent\(name: AnimationEventName, args: T\): void
+
+Directly triggers all configured callbacks of a specified event.
+
+- Parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ private triggerCallBack: any = function(item) {
+ console.log("trigger loopComplete, name:" + item.name)
+ }
+
+ this.animateItem.addEventListener('loopComplete', this.triggerCallBack)
+ this.animateItem.triggerEvent('loopComplete', this.animateItem)
+ this.animateItem.removeEventListener('loopComplete', this.triggerCallBack)
+ ```
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
new file mode 100644
index 0000000000000000000000000000000000000000..3cf2b4df5c04552bbde5c5d5810162e272fdcd2d
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
@@ -0,0 +1,959 @@
+# Path2D
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct AddPath {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+ private path2Da: Path2D = new Path2D("M250 150 L150 350 L350 350 Z")
+ private path2Db: Path2D = new Path2D()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.path2Db.addPath(this.path2Da)
+ this.context.stroke(this.path2Db)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+## closePath
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct MoveTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private path2Db: Path2D = new Path2D()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.path2Db.moveTo(50, 100)
+ this.path2Db.lineTo(250, 100)
+ this.path2Db.lineTo(150, 200)
+ this.path2Db.closePath()
+ this.context.stroke(this.path2Db)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+## lineTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct LineTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private path2Db: Path2D = new Path2D()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.path2Db.moveTo(100, 100)
+ this.path2Db.lineTo(100, 200)
+ this.path2Db.lineTo(200, 200)
+ this.path2Db.lineTo(200, 100)
+ this.path2Db.closePath()
+ this.context.stroke(this.path2Db)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ .png)
+
+
+## bezierCurveTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct BezierCurveTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private path2Db: Path2D = new Path2D()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.path2Db.moveTo(10, 10)
+ this.path2Db.bezierCurveTo(20, 100, 200, 100, 200, 20);this.context.stroke(this.path2Db)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+## quadraticCurveTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct QuadraticCurveTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private path2Db: Path2D = new Path2D()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.path2Db.moveTo(10, 10)
+ this.path2Db.quadraticCurveTo(100, 100, 200, 20)
+ this.context.stroke(this.path2Db)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+## arc
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Arc {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private path2Db: Path2D = new Path2D()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.path2Db.arc(100, 75, 50, 0, 6.28);this.context.stroke(this.path2Db)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+## arcTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct ArcTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private path2Db: Path2D = new Path2D()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.path2Db.arcTo(150, 20, 150, 70, 50)
+ this.context.stroke(this.path2Db)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+## ellipse
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Ellipse {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private path2Db: Path2D = new Path2D()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true)
+ this.context.stroke(this.path2Db)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+## rect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Rect {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private path2Db: Path2D = new Path2D()
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.path2Db.rect(20, 20, 100, 100);this.context.stroke(this.path2Db)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-components-canvas.md b/en/application-dev/reference/arkui-ts/ts-components-canvas.md
new file mode 100644
index 0000000000000000000000000000000000000000..c28d94e917737bd4625cb335bf388ae50bc7b5f9
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-components-canvas.md
@@ -0,0 +1,19 @@
+# Canvas Components** component provides an alphabetic index bar.
## Applicable Devices
-
+
+
+
+
-
+
+
+
+
+## Required Permissions, selected : number\}\)
+
+
+
+
+
+
** component presents event information on a component.
+## Required Permissions** component lays out child components vertically.
@@ -12,7 +15,7 @@ This component can contain child components.
## APIs** lays out child components vertically and inserts a horizontal divider between every two child components.
+## Required Permissions** component provides an operation to increase or decrease the number.
+## Required Permissions
+
+
** component allows for an elastic layout.
@@ -12,7 +15,7 @@ This component can contain child components.
## APIs** component.
@@ -402,7 +405,7 @@ struct FlexExample4 {
-
+
```
// Example 05
diff --git a/en/application-dev/reference/arkui-ts/ts-container-grid.md b/en/application-dev/reference/arkui-ts/ts-container-grid.md
index afb863a95afe949110c4c3ca601c314564c8dca0..6d142f9eec1c3bb7a631f05611e7f82806129f3a 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-grid.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-grid.md
@@ -1,4 +1,7 @@
-# Grid** component is a two-dimensional layout. The component is divided into rows and columns, to form cells. You can specify the cell where an item is located and combine different grids to form various layouts.
@@ -69,15 +72,15 @@ Grid\(\)
## Events
+
+
+
+
** component lays out components vertically. It is used only in the grid layout.
+## Required Permissions** component provides a single item in a grid.
diff --git a/en/application-dev/reference/arkui-ts/ts-container-list.md b/en/application-dev/reference/arkui-ts/ts-container-list.md
index efaaaea97b3a4ce2293dc1b32623b2e3e7e92a73..fffebb7e5072c2bbce95200fb5091f265b874e80 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-list.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-list.md
@@ -1,4 +1,7 @@
-# List** component provides a list container that presents a series of list items arranged in a column with the same width. It supports presentations of the same type of data in a multiple and coherent row style, for example, images or text.
@@ -12,7 +15,7 @@ This component contains the child component [](ts-container-listitem
## APIs
Axis
+Axis
--
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ItemDragInfo ) => void)
+
+ NOTE:
+
ItemDragInfo , itemIndex: number, insertIndex: number) => void)
+
+
+ NOTE:
+
ItemDragInfo , itemIndex: number) => void)
+
+
+ NOTE:
+
ItemDragInfo , itemIndex: number) => CustomBuilder )
+
+
+Return value: floating UI layout of the list item that is being dragged. NOTE:
+
ItemDragInfo , itemIndex: number, insertIndex: number, isSuccess: boolean) => void)
+
+
+ NOTE:
+
** is set to **true**.
+>- The list is bound to the **onItemDelete** event and the event returns **true** during event callback.
+>- The **editable** attribute of **ListItem** is set to **true**.
+>To enable for a list item, the following conditions must be met:
+>- **editMode** is set to **true**.
+>- The list item is bound to the **onItemDragStart** event and the event returns a floating UI during event callback.
+
+-
+
+
+
+
+
+
+
+
+
+
## Example** component displays specific items in the list. Its width occupies the **** component by default and must be used together with ****.
diff --git a/en/application-dev/reference/arkui-ts/ts-container-navigation.md b/en/application-dev/reference/arkui-ts/ts-container-navigation.md
new file mode 100644
index 0000000000000000000000000000000000000000..d0b68b8fbfae41d3c239ea93237214a192b4ae1a
--- /dev/null
+++ b/en/application-dev/reference/arkui-ts/ts-container-navigation.md
@@ -0,0 +1,418 @@
+# Navigation** component typically functions as the root container of a page and displays the page title, toolbar, and menu through attribute settings.
+
+## Required Permissions
+
+
+
+
+CustomBuilder
+
+
+
+
+
+
+
+NavigationMenuItem > | CustomBuilder
+
+
+
+
+NavigationTitleMode
+
+
+
+
+
+Object
+
+CustomBuilder
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- NavigationMenuItem parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Object attributes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+-
+
+
+
+
+
+
+
+
+
+ > **NOTE:**
+ >Currently, only the scrollable component **** is supported.
+
+
+## Events
+
+
+
+
+
+## Example = [
+ {
+ icon: $r('app.media.ic_public_add'),
+ icon_after: $r('app.media.ic_public_addcolor'),
+ text: 'add',
+ num: 0
+ },
+ {
+ icon: $r('app.media.ic_public_app'),
+ icon_after: $r('app.media.ic_public_appcolor'),
+ text: 'app',
+ num: 1
+ },
+ {
+ icon: $r('app.media.ic_public_collect'),
+ icon_after: $r('app.media.ic_public_collectcolor'),
+ text: 'collect',
+ num: 2
+ }
+ ]
+
+ @Builder NavigationToolbar() {
+ Row() {
+ ForEach(this.Build, item => {
+ Column() {
+ Image(this.currentIndex == item.num ? item.icon_after : item.icon)
+ .width(25)
+ .height(25)
+ Text(item.text)
+ .fontColor(this.currentIndex == item.num ? "#ff7500" : "#000000")
+ }
+ .onClick(() => {
+ this.currentIndex = item.num
+ })
+ .margin({ left: 70 })
+ })
+ }
+ }
+
+ build() {
+ Column() {
+ Navigation() {
+ Flex() {
+ }
+ }
+ .toolBar(this.NavigationToolbar)
+ }
+ }
+}
+```
+
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-container-navigator.md b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
index 37711363a1a83fac38d4c498484846a3ea90ea8c..a07cec59e74a380fa348d3236dd7954bf97c7c3b 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-navigator.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-navigator.md
@@ -1,4 +1,7 @@
-# Navigator** component provides redirection.
diff --git a/en/application-dev/reference/arkui-ts/ts-container-panel.md b/en/application-dev/reference/arkui-ts/ts-container-panel.md
index 0fb4cc8f856b33ecc5af3cc09172508f61f3b227..5c32f0a4cbfb18288990478253d37b58bc0a088a 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-panel.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-panel.md
@@ -1,4 +1,7 @@
-# Panel** component is a slidable panel that presents lightweight content with flexible sizes. It is a pop-up component.
diff --git a/en/application-dev/reference/arkui-ts/ts-container-row.md b/en/application-dev/reference/arkui-ts/ts-container-row.md
index cb8d022684d28991ea8ea9a197b71c376140b436..e25ea9b861af2897ea301d7e6eb2d6cb5055a639 100644
--- a/en/application-dev/reference/arkui-ts/ts-container-row.md
+++ b/en/application-dev/reference/arkui-ts/ts-container-row.md
@@ -1,4 +1,7 @@
-# Row** component lays out child components horizontally.
@@ -12,7 +15,7 @@ This component can contain child components.
## APIs** lays out child components horizontally and inserts a vertical divider between every two child components.
+## Required Permissions** component scrolls the content when the layout size of a component exceeds the viewport of its parent component.
@@ -19,9 +22,9 @@ Scroll\(scroller?: Scroller\)
+
+
ScrollDirection
+ScrollDirection
+
BarState
+BarState
+
+
+
+
+
--
@@ -98,7 +101,7 @@ Scroll\(scroller?: Scroller\)
Controller of the scrollable container component. You can bind this component to the container component and use it to control the scrolling of the container component. Currently, this component can be bound to the **** and **** components.
-### Objects to Import
+
+
+
+
@@ -202,7 +207,9 @@ Scrolls to the edge of the container.
### scroller.scrollPage
-
-
-
-
-
+
** component is supported.
@@ -332,7 +329,7 @@ Scrolls to the item with the specified index.
+
** is used together with the scrollable components, such as ****, ****, and ****.
+
+## Required Permissions
+
+
+
+
+
+ Scroller
+
+
+
+
+ ScrollBarDirection
+
+
+
+
+ BarState
+
+
+
+
+
+ > **NOTE:**
+ >The **<\ScrollBar>** component defines the behavior style of the scrollable area, and its subnodes define the behavior style of the scrollbar.
+ >This component is bound to a scrollable component through **scroller**, and can be used to scroll the scrollable component only when their directions are the same. The **<\ScrollBar>** component can be bound to only one scrollable component, and vice versa.
+
+-
+
+
+
+
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+## Example** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
@@ -12,7 +15,7 @@ The **** component can contain child components.
## APIs** component provides a step navigator.
+
+## Applicable Devices
+
+
+
+
+
+
+
+
+
+## Required Permissions
+
+
+
+
+
+
+
+
+
+
+
+
+## Attributes
+
+
+
+
+
+
+
+**prevIndex**: index of the step page before the switching. **index**: index of the step page after the switching, that is, index of the previous or next page.
+
+## Example** component provides an element for the **** component.
+
+## Applicable Devices
+
+
+
+
+
+
+
+
+
+## Required Permissions
+
+
+
+
+
+
+
+
+
+
+
+
+ItemState
+
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+## Example** component provides a container that allows users to switch among child components by swiping operations.
@@ -47,9 +50,9 @@ Swiper\(value:\{controller?: SwiperController\}\)
## Attributes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -176,20 +197,52 @@ Controller of the **** component. You can bind this object to the **
## Example** component is used only in the **** component. It corresponds to the content view of a switched tab page.
@@ -16,6 +19,8 @@ TabContent\(\)
## Attributes
-
+
+CustomBuilder
+
NOTE:
** component is a container component that allows users to switch between content views through tabs. Each tab page corresponds to a content view.
@@ -133,6 +136,8 @@ Defines a tab controller, which is used to control switching of tabs.
## Attributes
** component is used to draw a circle.
+## Required Permissions** component is used to draw an ellipse.
+## Required Permissions** component is used to draw a straight line.
+## Required Permissions** component is used to draw a path.
+## Required Permissions** component is used to draw a polygon.
+## Required Permissions** component is used to draw a polyline.
+## Required Permissions** component is used to draw a rectangle.
+## Required Permissions** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
@@ -6,13 +9,17 @@ The **** component is the parent component of the drawing components.
2. The **** component is used independently to draw a specific shape.
+## Required Permissions** component can contain child components.
## APIs
diff --git a/en/application-dev/reference/arkui-ts/ts-gesture-processing.md b/en/application-dev/reference/arkui-ts/ts-gesture-processing.md
index 2e9679997a14217c8c9cd6e866a06f5eac29f6a9..cd8880a63e51c155ee5a9f4b3945fa843d127cd1 100644
--- a/en/application-dev/reference/arkui-ts/ts-gesture-processing.md
+++ b/en/application-dev/reference/arkui-ts/ts-gesture-processing.md
@@ -1,4 +1,4 @@
-# Gesture Processing
- NOTE: However, the built-in gestures of the child components are not masked. For example, when the child component is a
+
NOTE:
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
-
-
-
-
+
+
+ EventTarget
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
DialogAlignment
+ DialogAlignment
+
DialogAlignment .Default
+ DialogAlignment .Default
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ DialogAlignment
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ SheetInfo >
+
+
+
+
+
+- SheetInfo parameters
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Example
CustomDialog
+ CustomDialog
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RenderingContextSettings
+
+
+ RenderingContextSettings .
+
+
+
+## Attributes
+
+
+
+fillStyle
+CanvasGradient | CanvasPattern
+
+
+When the type is When the type is createLinearGradient method. When the type is createPattern method to create a pattern. lineWidth
+
+
+
+strokeStyle
+CanvasGradient | CanvasPattern
+
+
+When the type is When the type is createLinearGradient method. When the type is createPattern method to create a pattern. lineCap
+
+
+
+lineJoin
+
+
+
+miterLimit
+
+
+
+font
+
+
+
+
+(Optional) (Optional)
+(Optional) (Optional) (Optional) (Optional) textAlign
+
+
+
+ NOTE:
+
textBaseline
+
+
+
+globalAlpha
+
+
+
+lineDashOffset
+
+
+
+globalCompositeOperation
+
+
+
+shadowBlur
+
+
+
+shadowColor
+
+
+
+shadowOffsetX
+
+
+
+shadowOffsetY
+
+
+
+imageSmoothingEnabled
+
+
+
+
+
+
+
+
+
+> **NOTE:**
+>The value of the **** type can be in 'rgb\(255, 255, 255\)', 'rgba\(255, 255, 255, 1.0\)', or '\#FFFFFF' format.
+
+### fillStyle
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+@Entry
+@Component
+struct GlobalCompositeOperation {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.fillStyle = 'rgb(255,0,0)'
+ this.offContext.fillRect(20, 20, 50, 50)
+ this.offContext.globalCompositeOperation = 'source-over'
+ this.offContext.fillStyle = 'rgb(0,0,255)'
+ this.offContext.fillRect(50, 50, 50, 50)
+ this.offContext.fillStyle = 'rgb(255,0,0)'
+ this.offContext.fillRect(120, 20, 50, 50)
+ this.offContext.globalCompositeOperation = 'destination-over'
+ this.offContext.fillStyle = 'rgb(0,0,255)'
+ this.offContext.fillRect(150, 50, 50, 50)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+}
+```
+
+
+
+### shadowBlur
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct FillRect {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.fillRect(0,30,100,100)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### strokeRect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct StrokeRect {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.strokeRect(30, 30, 200, 150)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### clearRect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct ClearRect {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.fillStyle = 'rgb(0,0,255)'
+ this.offContext.fillRect(0,0,500,500)
+ this.offContext.clearRect(20,20,150,100)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### fillText
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct FillText {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.font = '30px sans-serif'
+ this.offContext.fillText("Hello World!", 20, 100)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### strokeText
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct StrokeText {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.font = '55px sans-serif'
+ this.offContext.strokeText("Hello World!", 20, 60)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### measureText
+
+
+
+
+
+
+
+
+
+
+
+- Return values
+
+
+
+ TextMetrics
+
+
+
+-
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct MeasureText {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.font = '50px sans-serif'
+ this.offContext.fillText("Hello World!", 20, 100)
+ this.offContext.fillText("width:" + this.context.measureText("Hello World!").width, 20, 200)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### stroke
+
+
+
+
+
+ Path2D
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Stroke {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenRenderingContext(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.moveTo(25, 25)
+ this.offContext.lineTo(25, 105)
+ this.offContext.strokeStyle = 'rgb(0,0,255)'
+ this.offContext.stroke()
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### beginPath
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct MoveTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.beginPath()
+ this.offContext.moveTo(10, 10)
+ this.offContext.lineTo(280, 160)
+ this.offContext.stroke()
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### lineTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct LineTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.beginPath()
+ this.offContext.moveTo(10, 10)
+ this.offContext.lineTo(280, 160)
+ this.offContext.stroke()
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### closePath
+
+
+
+
+
+ ImageBitmap
+
+
+ ImageBitmap .
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct CreatePattern {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ var pattern = this.offContext.createPattern(this.img, 'repeat')
+ this.offContext.fillStyle = pattern
+ this.offContext.fillRect(0, 0, 200, 200)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### bezierCurveTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct BezierCurveTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.beginPath()
+ this.offContext.moveTo(10, 10)
+ this.offContext.bezierCurveTo(20, 100, 200, 100, 200, 20)
+ this.offContext.stroke()
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### quadraticCurveTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct QuadraticCurveTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.beginPath();
+ this.offContext.moveTo(20, 20);
+ this.offContext.quadraticCurveTo(100, 100, 200, 20);
+ this.offContext.stroke();
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### arc
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Arc {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.beginPath()
+ this.offContext.arc(100, 75, 50, 0, 6.28)
+ this.offContext.stroke()
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### arcTo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct ArcTo {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.moveTo(100, 20);
+ this.offContext.arcTo(150, 20, 150, 70, 50);
+ this.offContext.stroke();
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### ellipse
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Ellipse {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.beginPath()
+ this.offContext.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true)
+ this.offContext.stroke()
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### rect
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Rect {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.rect(20, 20, 100, 100) // Create a 100*100 rectangle at (20, 20)
+ this.offContext.stroke()
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### fill
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Rotate {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.rotate(45 * Math.PI / 180) // Rotate the rectangle 45 degrees
+ this.offContext.fillRect(70, 20, 50, 50)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### scale
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Scale {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.strokeRect(10, 10, 25, 25)
+ this.offContext.scale(2, 2) // Scale to 200%
+ this.offContext.strokeRect(10, 10, 25, 25)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### transform
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Transform {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.fillStyle = 'rgb(0,0,0)'
+ this.offContext.fillRect(0, 0, 100, 100)
+ this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
+ this.offContext.fillStyle = 'rgb(255,0,0)'
+ this.offContext.fillRect(0, 0, 100, 100)
+ this.offContext.transform(1, 0.5, -0.5, 1, 10, 10)
+ this.offContext.fillStyle = 'rgb(0,0,255)'
+ this.offContext.fillRect(0, 0, 100, 100)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### setTransform
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct SetTransform {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.fillStyle = 'rgb(255,0,0)'
+ this.offContext.fillRect(0, 0, 100, 100)
+ this.offContext.setTransform(1,0.5, -0.5, 1, 10, 10)
+ this.offContext.fillStyle = 'rgb(0,0,255)'
+ this.offContext.fillRect(0, 0, 100, 100)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### translate
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Translate {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ this.offContext.fillRect(10, 10, 50, 50)
+ this.offContext.translate(70, 70)
+ this.offContext.fillRect(10, 10, 50, 50)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### drawImage
+
+
+
+
+
+ ImageBitmap
+
+
+ ImageBitmap .
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct Index {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() => {
+ this.offContext.drawImage( this.img,0,0,400,200)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### createImageData
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### createImageData
+
+
+
+
+
+ ImageData
+
+
+
+
+
+
+### getImageData
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### putImageData
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct PutImageData {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ var imageData = this.offContext.createImageData(100, 100)
+ for (var i = 0; i < imageData.data.length; i += 4) {
+ imageData.data[i + 0] = 255
+ imageData.data[i + 1] = 0
+ imageData.data[i + 2] = 255
+ imageData.data[i + 3] = 255
+ }
+ this.offContext.putImageData(imageData, 10, 10)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### restore
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct CreateLinearGradient {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private gra:CanvasGradient = new CanvasGradient()
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ var grad = this.offContext.createLinearGradient(50,0, 300,100)
+ this.gra.addColorStop(0.0, 'red')
+ this.gra.addColorStop(0.5, 'white')
+ this.gra.addColorStop(1.0, 'green')
+ this.offContext.fillStyle = grad
+ this.offContext.fillRect(0, 0, 500, 500)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+### createRadialGradient
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Example
+
+ ```
+ @Entry
+ @Component
+ struct CreateRadialGradient {
+ private settings: RenderingContextSettings = new RenderingContextSettings(true,true)
+ private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+ private gra:CanvasGradient = new CanvasGradient()
+ private offContext: OffscreenCanvasRenderingContext2D = new OffscreenCanvasRenderingContext2D(600, 600, this.settings)
+ build() {
+ Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+ Canvas(this.context)
+ .width('100%')
+ .height('100%')
+ .backgroundColor('#ffff00')
+ .onReady(() =>{
+ var grad = this.offContext.createRadialGradient(200,200,50, 200,200,200)
+ this.gra.addColorStop(0.0, 'red')
+ this.gra.addColorStop(0.5, 'white')
+ this.gra.addColorStop(1.0, 'green')
+ this.offContext.fillStyle = grad
+ this.offContext.fillRect(0, 0, 500, 500)
+ var image = this.offContext.transferToImageBitmap()
+ this.context.transferFromImageBitmap(image)
+ })
+ }
+ .width('100%')
+ .height('100%')
+ }
+ }
+ ```
+
+ 
+
+
+## CanvasPattern
+
+
+
+
+
+
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 a3892025437454339092bd2af488934b2016a078..754e983d7efc929ff9890c9095a61be8784eafc5 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
@@ -1,4 +1,13 @@
-# Gradient Color
@@ -14,9 +23,9 @@
-Angle ,
+Angle ,
GradientDirection ,
-ColorStop >
+ColorStop >
-ColorStop >
+ColorStop >
@@ -54,7 +63,7 @@
-ColorStop >
+ColorStop >
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
index 84dad7dcda292a38fdd8329160b092d3024c7aa8..a5e0d3e0add09867b6380c00df0b8dc8323c36d3 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-image-effect.md
@@ -1,4 +1,13 @@
-# Image Effect Configuration
@@ -88,6 +97,15 @@
+
+
+
+
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
index 9a6499b42e2afbfed033956fe81891d2cf25ff46..cb9ef84f00640333a638c95a2bf1bb7e00cb1179 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-layout-constraints.md
@@ -1,4 +1,13 @@
-# Layout Constraints
@@ -27,7 +36,7 @@
- NOTE: This parameter is valid only for the Row/Column/Flex (single-row) container component.
+
NOTE:
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
index 77759cd3be9b6ca5a7bde7c9c9830fe4239d8d54..662930943e64d809c4d961b371be83ca95d91a3d 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-menu.md
@@ -1,4 +1,13 @@
-# Menu Control
@@ -13,11 +22,11 @@
MenuItem >
+MenuItem > | CustomBuilder
+
@@ -44,7 +53,7 @@ struct OverlayExample {
Column() {
Image($r('app.media.img'))
.width(240).height(240)
- .overlay("Don't walk and play with your phone.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } })
+ .overlay("Winter is a beautiful season, especially when it snows.", { align: Alignment.Bottom, offset: { x: 0, y: -15 } })
}.border({ color: Color.Black, width: 2 })
}.width('100%')
}.padding({ top: 20 })
@@ -52,5 +61,5 @@ struct OverlayExample {
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
index 44fe93b09dfbe3c1d4c380a20ed07d9efcd443e3..e0ec8e6def24f08eecdacc1233f563abe4427a43 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-popup.md
@@ -1,48 +1,271 @@
-# Popup Control
+> **NOTE:**
+>This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
+
+## Required Permissions
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+PopupOption | CustomPopupOption
+
-
-
-
-
-
+
+
+
+- PopupOption APIs
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- CustomPopupOption APIs8+
+
+
+
+
+
+
+
+
+
+
+
+
+ Placement
+
+
+
+
+ Color
+
+
+
+
+ Color
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+- Placement enums8+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## Example
+
+
+
+
+Rectangle
+
+
+
+
+
+
+
+ NOTE:
+
+
+
+
+-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ > **NOTE:**
+ >When both **x** and **y** are set to positive values, the entire touch target offsets towards the lower right corner of the component. How much the touch target offsets is subject to the set values.
+
+
+## Example
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
index 74b58e40645efc6af9cdcc881928a341fb902128..dbac35d7acd691ff16880f42955607a30fb80f8b 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-size.md
@@ -1,11 +1,18 @@
-# Size
+
+
+
+
+
+
+
+
@@ -43,9 +50,9 @@ This topic describes the attributes used to set the component size.
+
+
@@ -58,9 +65,9 @@ This topic describes the attributes used to set the component size.
+
+
@@ -74,13 +81,13 @@ This topic describes the attributes used to set the component size.
+
+
-
+
@@ -93,9 +100,9 @@ This topic describes the attributes used to set the component size.
+
+
+
+
+
+
+
+
+
+
+
+## Example
@@ -125,5 +134,5 @@ struct TransformExample {
}
```
-
+
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
index 0e5ad66ef588156f5bdb35c8197ad144647eadd7..0d1e059339f91505df8d52c44d6e517bffb9f148 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-visibility.md
@@ -1,4 +1,13 @@
-# Visibility
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
index 5ee46c6c64bb6a072d19f3faac63f84eba13a775..91770cb64ef08cd8209c9ce6d9969d708ebd9f3b 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes-z-order.md
@@ -1,4 +1,13 @@
-# Z-order Control
diff --git a/en/application-dev/reference/arkui-ts/ts-universal-attributes.md b/en/application-dev/reference/arkui-ts/ts-universal-attributes.md
index 08bf3e67b96e2c69e76085148be87c197f3f15f7..2ca2f7ebdbf19b813cdaf4894ab13bb8eb2172f4 100644
--- a/en/application-dev/reference/arkui-ts/ts-universal-attributes.md
+++ b/en/application-dev/reference/arkui-ts/ts-universal-attributes.md
@@ -1,4 +1,4 @@
-# Universal Attributes
