diff --git a/en/application-dev/Readme-EN.md b/en/application-dev/Readme-EN.md
index 0363d1f89ac76ca3c8187637a46b3b4230d3dab6..206b69d6dc613a4e9434bbbf161f2d33c99c1b1c 100644
--- a/en/application-dev/Readme-EN.md
+++ b/en/application-dev/Readme-EN.md
@@ -16,6 +16,7 @@
- [Data Management](database/Readme-EN.md)
- [USB Service](usb/Readme-EN.md)
- [DFX](dfx/Readme-EN.md)
+- [WebGL](webgl/Readme-EN.md)
- [Development References](reference/Readme-EN.md)
- [JavaScript-based Web-like Development Paradigm](reference/arkui-js/Readme-EN.md)
- [TypeScript-based Declarative Development Paradigm](reference/arkui-ts/Readme-EN.md)
diff --git a/en/application-dev/reference/apis/js-apis-i18n.md b/en/application-dev/reference/apis/js-apis-i18n.md
index 0763a1598728414c51ec8036cbe2243235d012b0..27dc8eb464f9615f0b61462a5f7f81d71195d1f1 100644
--- a/en/application-dev/reference/apis/js-apis-i18n.md
+++ b/en/application-dev/reference/apis/js-apis-i18n.md
@@ -1,7 +1,6 @@
-# Internationalization (i18n)
+# Internationalization \(i18n\)
-
-> **NOTE:**
+> **NOTE:**
>- The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.
>- This module contains enhanced i18n APIs, which are not defined in ECMA 402.
@@ -21,10 +20,9 @@ getDisplayLanguage\(language: string, locale: string, sentenceCase?: boolean\):
Obtains the localized script for the specified language.
-- Parameters
+- Parameters
-
Name
Type
@@ -85,8 +83,8 @@ Obtains the localized script for the specified language.
- Example
```
- i18n.getDisplayLanguage("zh", "en-GB", true);
- i18n.getDisplayLanguage("zh", "en-GB");
+ I18n.getDisplayLanguage("zh", "en-GB", true);
+ I18n.getDisplayLanguage("zh", "en-GB");
```
@@ -159,8 +157,8 @@ Obtains the localized script for the specified country.
- Example
```
- i18n.getDisplayCountry("zh-CN", "en-GB", true);
- i18n.getDisplayCountry("zh-CN", "en-GB");
+ I18n.getDisplayCountry("zh-CN", "en-GB", true);
+ I18n.getDisplayCountry("zh-CN", "en-GB");
```
@@ -242,7 +240,7 @@ Obtains the system language.
- Example
```
- i18n.getSystemLanguage();
+ I18n.getSystemLanguage();
```
@@ -272,7 +270,7 @@ Obtains the system region.
- Example
```
- i18n.getSystemRegion();
+ I18n.getSystemRegion();
```
@@ -302,7 +300,7 @@ Obtains the system locale.
- Example
```
- i18n.getSystemLocale();
+ I18n.getSystemLocale();
```
@@ -366,7 +364,7 @@ Obtains a **Calendar** object.
- Example
```
- i18n.getCalendar("zh-Hans", "gregory");
+ I18n.getCalendar("zh-Hans", "gregory");
```
@@ -532,7 +530,7 @@ Sets the year, month, day, hour, minute, and second for this **Calendar** obje
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setTime(2021, 10, 1, 8, 0, 0); // set time to 2021.10.1 08:00:00
```
@@ -571,7 +569,7 @@ Sets the time zone of this **Calendar** object.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setTimeZone("Asia/Shanghai");
```
@@ -602,7 +600,7 @@ Obtains the time zone of this **Calendar** object.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setTimeZone("Asia/Shanghai");
calendar.getTimeZone(); // Asia/Shanghai"
```
@@ -674,7 +672,7 @@ Sets the start day of a week for this **Calendar** object.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setFirstDayOfWeek(0);
```
@@ -705,7 +703,7 @@ Obtains the minimum number of days in the first week of a year.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.getMinimalDaysInFirstWeek();
```
@@ -800,7 +798,7 @@ Obtains the value of the specified field in the **Calendar** object.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setTime(2021, 10, 1, 8, 0, 0); // set time to 2021.10.1 08:00:00
calendar.get("hour_of_day"); // 8
```
@@ -857,7 +855,7 @@ Obtains the name of the **Calendar** object displayed for the specified locale
- Example
```
- var calendar = i18n.getCalendar("en-US", "buddhist");
+ var calendar = I18n.getCalendar("en-US", "buddhist");
calendar.getDisplayName("zh"); // Obtain the name of the Buddhist calendar in zh.
```
@@ -913,7 +911,7 @@ Checks whether the specified date in this **Calendar** object is a weekend.
- Example
```
- var calendar = i18n.getCalendar("zh-Hans");
+ var calendar = I18n.getCalendar("zh-Hans");
calendar.setTime(2021, 11, 11, 8, 0, 0); // Set the time to 2021.11.11 08:00:00.
calendar.isWeekend(); // false
var date = new Date(2011, 11, 6, 9, 0, 0);
@@ -966,7 +964,7 @@ Parameters
- Example
```
- var phoneNumberFormat= new i18n.PhoneNumberFormat("CN", {"type": "E164"});
+ var phoneNumberFormat= new I18n.PhoneNumberFormat("CN", {"type": "E164"});
```
@@ -1022,7 +1020,7 @@ Checks whether the format of the specified phone number is valid.
- Example
```
- var phonenumberfmt = new i18n.PhoneNumberFormat("CN");
+ var phonenumberfmt = new I18n.PhoneNumberFormat("CN");
phonenumberfmt.isValidNumber("15812312312");
```
@@ -1079,7 +1077,7 @@ Formats a phone number.
- Example
```
- var phonenumberfmt = new i18n.PhoneNumberFormat("CN");
+ var phonenumberfmt = new I18n.PhoneNumberFormat("CN");
phonenumberfmt.format("15812312312");
```
@@ -1303,7 +1301,7 @@ Creates an **IndexUtil** object.
- Example
```
- var indexUtil= i18n.getInstance("zh-CN");
+ var indexUtil= I18n.getInstance("zh-CN");
```
@@ -1444,7 +1442,7 @@ Obtains the index of a **text** object.
isDigit\(char: string\): boolean
-Checks whether the input character string is comprised of digits.
+Checks whether the input character is a digit.
- Parameters
@@ -1500,7 +1498,7 @@ Checks whether the input character string is comprised of digits.
isSpaceChar\(char: string\): boolean
-Checks whether the input character is comprised of space.
+Checks whether the input character is a space.
- Parameters
@@ -1556,7 +1554,7 @@ Checks whether the input character is comprised of space.
isWhitespace\(char: string\): boolean
-Checks whether the input character is comprised of white space.
+Checks whether the input character is a white space.
- Parameters
@@ -1612,7 +1610,7 @@ Checks whether the input character is comprised of white space.
isRTL\(char: string\): boolean
-Checks whether the input character string is of the right to left \(RTL\) language.
+Checks whether the input character is of the right to left \(RTL\) language.
- Parameters
@@ -1668,7 +1666,7 @@ Checks whether the input character string is of the right to left \(RTL\) langua
isIdeograph\(char: string\): boolean
-Checks whether the input character string is comprised of ideographic characters.
+Checks whether the input character is an ideographic character.
- Parameters
@@ -1724,7 +1722,7 @@ Checks whether the input character string is comprised of ideographic characters
isLetter\(char: string\): boolean
-Checks whether the input character string is comprised of letters.
+Checks whether the input character is a letter.
- Parameters
@@ -1780,7 +1778,7 @@ Checks whether the input character string is comprised of letters.
isLowerCase\(char: string\): boolean
-Checks whether the input character is comprised of lowercase letters.
+Checks whether the input character is a lowercase letter.
- Parameters
@@ -1836,7 +1834,7 @@ Checks whether the input character is comprised of lowercase letters.
isUpperCase\(char: string\): boolean
-Checks whether the input character is comprised of uppercase letters.
+Checks whether the input character is an uppercase letter.
- Parameters
@@ -1995,7 +1993,7 @@ Obtains a [BreakIterator](#section1312302611613) object for text segmentation.
- Example
```
- i18n.getLineInstance("en");
+ I18n.getLineInstance("en");
```
@@ -2036,8 +2034,8 @@ Sets the text to be processed by the [BreakIterator](#section1312302611613) ob
- Example
```
- iterator = I18n.getLineInstance("en");
- iterator.setLineBreakText("Apple is my favorite fruit.");
+ var iterator = I18n.getLineInstance("en");
+ var iterator.setLineBreakText("Apple is my favorite fruit.");
```
@@ -2068,7 +2066,7 @@ Obtains the text being processed by the [BreakIterator](#section1312302611613)
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.getLineBreakText(); // Apple is my favorite fruit.
```
@@ -2101,7 +2099,7 @@ Obtains the position of the [BreakIterator](#section1312302611613) object in t
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
breakIter.current(); // 0
```
@@ -2167,7 +2165,7 @@ Puts the [BreakIterator](#section1312302611613) object to the last text bounda
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.last(); // 27
```
@@ -2226,7 +2224,7 @@ Moves the [BreakIterator](#section1312302611613) object backward by the specif
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.first(); // 0
iterator.next(); // 6
@@ -2261,7 +2259,7 @@ Moves the [BreakIterator](#section1312302611613) object to the previous text b
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.first(); // 0
iterator.next(3); // 12
@@ -2322,7 +2320,7 @@ Moves the [BreakIterator](#section1312302611613) object to the text boundary a
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.following(0); // 6
iterator.following(100); // -1
@@ -2383,9 +2381,285 @@ Checks whether the position specified by the offset is a text boundary. If **tr
- Example
```
- iterator = I18n.getLineInstance("en");
+ var iterator = I18n.getLineInstance("en");
iterator.setLineBreakText("Apple is my favorite fruit.");
iterator.isBoundary(0); // true;
iterator.isBoundary(5); // false;
```
+
+## i18n.is24HourClock8+
+
+is24HourClock\(\): boolean
+
+Checks whether the 24-hour clock is used.
+
+- Return values
+
+
+ Type
+
+ Description
+
+
+
+ boolean
+
+ The value true indicates that the 24-hour clock is used, and value false indicates the opposite.
+
+
+
+
+
+
+- Example
+
+ ```
+ var is24HourClock = i18n.is24HourClock();
+ ```
+
+
+## i18n.set24HourClock8+
+
+set24HourClock\(option: boolean\): boolean
+
+Sets the 24-hour clock.
+
+- Parameters
+
+
+ Name
+
+ Type
+
+ Mandatory
+
+ Description
+
+
+
+ option
+
+ boolean
+
+ Yes
+
+ Whether to enable the 24-hour clock. The value true means to enable the 24-hour clock, and value false means the opposite.
+
+
+
+
+
+- Return values
+
+
+ Type
+
+ Description
+
+
+
+ boolean
+
+ The value true indicates that the 24-hour clock is enabled, and value false indicates the opposite.
+
+
+
+
+
+
+- Example
+
+ ```
+ // Set the system time to the 24-hour format.
+ var success = I18n.set24HourClock(true);
+ ```
+
+
+## i18n.addPreferredLanguage8+
+
+addPreferredLanguage\(language: string, index?: number\): boolean
+
+Adds a preferred language to the specified position on the preferred language list.
+
+- Parameters
+
+
+ Name
+
+ Type
+
+ Mandatory
+
+ Description
+
+
+
+ language
+
+ string
+
+ Yes
+
+ Preferred language to add.
+
+
+ index
+
+ number
+
+ No
+
+ Position to which the preferred language is added.
+
+
+
+
+
+- Return values
+
+
+ Type
+
+ Description
+
+
+
+ boolean
+
+ The value true indicates that the preferred language is added, and value false indicates the opposite.
+
+
+
+
+
+
+- Example
+
+ ```
+ // Add zh-CN to the preferred language list.
+ var language = 'zh-CN';
+ var index = 0;
+ var success = i18n.addPreferredLanguage(langauge, index);
+ ```
+
+
+## i18n.removePreferredLanguage8+
+
+removePreferredLanguage\(index: number\): boolean
+
+Deletes a preferred language from the specified position on the preferred language list.
+
+- Parameters
+
+
+ Name
+
+ Type
+
+ Mandatory
+
+ Description
+
+
+
+ index
+
+ number
+
+ Yes
+
+ Position of the preferred language to delete.
+
+
+
+
+
+- Return values
+
+
+ Type
+
+ Description
+
+
+
+ boolean
+
+ The value true indicates that the preferred language is deleted, and value false indicates the opposite.
+
+
+
+
+
+
+- Example
+
+ ```
+ // Delete the first preferred language from the preferred language list.
+ var index = 0;
+ var success = i18n.removePreferredLanguage(index);
+ ```
+
+
+## i18n.getPreferredLanguageList8+
+
+getPreferredLanguageList\(\): Array
+
+Obtains the preferred language list.
+
+- Return values
+
+
+ Type
+
+ Description
+
+
+
+ Array<string>
+
+ Preferred language list.
+
+
+
+
+
+
+- Example
+
+ ```
+ var preferredLanguageList = i18n.getPreferredLanguageList();
+ ```
+
+
+## i18n.getFirstPreferredLanguage8+
+
+getFirstPreferredLanguage\(\): string
+
+Obtains the preferred language that best matches the HAP resource.
+
+- Return values
+
+
+ Type
+
+ Description
+
+
+
+ string
+
+ Preferred language that best matches the HAP resource.
+
+
+
+
+
+
+- Example
+
+ ```
+ var firstPreferredLangauge = i18n.getFirstPreferredLangauge();
+ ```
+
diff --git a/en/application-dev/ui/figures/datatype.png b/en/application-dev/ui/figures/datatype.png
deleted file mode 100644
index fde616c73000d3f58fd98eea59088177221127a5..0000000000000000000000000000000000000000
Binary files a/en/application-dev/ui/figures/datatype.png and /dev/null differ
diff --git a/en/application-dev/webgl/Readme-EN.md b/en/application-dev/webgl/Readme-EN.md
new file mode 100644
index 0000000000000000000000000000000000000000..06be1865f19400714bfbaaf1d49386ee6a3341fc
--- /dev/null
+++ b/en/application-dev/webgl/Readme-EN.md
@@ -0,0 +1,4 @@
+# WebGL
+
+- [WebGL Overview](webgl-overview.md)
+- [WebGL Development](webgl-guidelines.md)
diff --git a/en/application-dev/webgl/figures/en-us_image_0000001192269746.gif b/en/application-dev/webgl/figures/en-us_image_0000001192269746.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e4c7ed66998e8c6b4b87c587edb5986cc547d9dc
Binary files /dev/null and b/en/application-dev/webgl/figures/en-us_image_0000001192269746.gif differ
diff --git a/en/application-dev/webgl/figures/en-us_image_0000001192429306.gif b/en/application-dev/webgl/figures/en-us_image_0000001192429306.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2297841f49ed784fbe4ecd131df8965202e1c14c
Binary files /dev/null and b/en/application-dev/webgl/figures/en-us_image_0000001192429306.gif differ
diff --git a/en/application-dev/webgl/figures/en-us_image_0000001238544451.png b/en/application-dev/webgl/figures/en-us_image_0000001238544451.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e95598c6f204f9e9165ad183e2b33b7adcadca4
Binary files /dev/null and b/en/application-dev/webgl/figures/en-us_image_0000001238544451.png differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-caution.gif b/en/application-dev/webgl/public_sys-resources/icon-caution.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-caution.gif differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-danger.gif b/en/application-dev/webgl/public_sys-resources/icon-danger.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-danger.gif differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-note.gif b/en/application-dev/webgl/public_sys-resources/icon-note.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-note.gif differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-notice.gif b/en/application-dev/webgl/public_sys-resources/icon-notice.gif
new file mode 100644
index 0000000000000000000000000000000000000000..86024f61b691400bea99e5b1f506d9d9aef36e27
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-notice.gif differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-tip.gif b/en/application-dev/webgl/public_sys-resources/icon-tip.gif
new file mode 100644
index 0000000000000000000000000000000000000000..93aa72053b510e456b149f36a0972703ea9999b7
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-tip.gif differ
diff --git a/en/application-dev/webgl/public_sys-resources/icon-warning.gif b/en/application-dev/webgl/public_sys-resources/icon-warning.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/en/application-dev/webgl/public_sys-resources/icon-warning.gif differ
diff --git a/en/application-dev/webgl/webgl-guidelines.md b/en/application-dev/webgl/webgl-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..2d6f0f756ac3f3e27c2a016f47bbec89ce4f51cf
--- /dev/null
+++ b/en/application-dev/webgl/webgl-guidelines.md
@@ -0,0 +1,715 @@
+# WebGL Development
+
+## When to Use
+
+WebGL helps you process graphics at the frontend, for example, drawing color graphics.
+
+
+## Available APIs
+
+To use WebGL, you must import the following module:
+
+
+```
+import webgl from "@ohos.webglnapi";
+```
+
+ **Table 1** WebGL APIs
+
+| API | Description |
+| -------- | -------- |
+| canvas.getContext | Obtains the canvas context. |
+| webgl.createBuffer(): WebGLBuffer \| null | Creates and initializes a WebGL buffer. |
+| webgl.bindBuffer(target: GLenum, buffer: WebGLBuffer \| null): void | Binds the WebGL buffer to the target. |
+| webgl.bufferData(target: GLenum, srcData: ArrayBufferView, usage: GLenum, srcOffset: GLuint, length?: GLuint): void | Creates and initializes the WebGL buffer object's data store. |
+| webgl.getAttribLocation(program: WebGLProgram, name: string): GLint | Obtains the address of the **attribute** variable in the shader from the given WebGLProgram. |
+| webgl.vertexAttribPointer(index: GLuint, size: GLint, type: GLenum, normalized: GLboolean, stride: GLsizei, offset: GLintptr): void | Assigns a **Buffer** object to a variable. |
+| webgl.enableVertexAttribArray(index: GLuint): void | Connects a variable to the **Buffer** object allocated to it. |
+| webgl.clearColor(red: GLclampf, green: GLclampf, blue: GLclampf, alpha: GLclampf): void | Clears the specified color on the **<canvas>** component. |
+| webgl.clear(mask: GLbitfield): void | Clears the **<canvas>** component. |
+| webgl.drawArrays(mode: GLenum, first: GLint, count: GLsizei): void | Draws data. |
+| webgl.flush(): void | Flushes data to the GPU and clears the buffer. |
+| webgl.createProgram(): WebGLProgram \| null | Creates a **WebGLProgram** object. |
+
+
+## How to Develop
+
+The following describes how to draw a 2D image without using shaders and how to draw a color triangle using shaders.
+
+>  **Note:**
+> When using WebGL for development, use a real device to ensure the GUI display effect.
+
+
+### Drawing a 2D Image Without Using Shaders
+
+To draw a 2D image without using WebGL, that is, to implement CPU rather than GPU drawing, perform the following steps:
+
+1. Create a page layout in the **index.hml** file. The following is an example of the file content:
+
+ ```
+
+
+ BtnDraw2D
+
+ ```
+
+2. Set the page style in the **index.css** file. The following is an example of the file content:
+
+ ```
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+ .btn-button {
+ margin: 1px;
+ height: 40px;
+ width: 220px;
+ background-color: lightblue;
+ font-size: 20px;
+ text-color: blue;
+ }
+ ```
+
+3. Edit the **index.js** file to add the 2D drawing logic code. The following is an example of the file content:
+
+ ```
+ //index.js
+ export default { // Native API interaction code
+ data: {
+ title: "DEMO BY TEAMOL",
+ fit:"cover",
+ fits: ["cover", "contain", "fill", "none", "scale-down"]
+ },
+ onInit() {
+ this.title = this.$t('strings.world');
+ },
+ BtnDraw2D(){
+ // Obtain the component.
+ const canvas = this.$refs.canvas1;
+ // Obtain the 2D context.
+ const ctx = canvas.getContext('2d');
+
+ // Execute the CPU drawing function.
+ // Set the line width.
+ ctx.lineWidth = 10;
+ // Wall
+ ctx.strokeRect(75, 140, 150, 110);
+ // Door
+ ctx.fillRect(130, 190, 40, 60);
+ // Roof
+ ctx.beginPath();
+ ctx.moveTo(50, 140);
+ ctx.lineTo(150, 60);
+ ctx.lineTo(250, 140);
+ ctx.closePath();
+ ctx.stroke();
+ }
+ }
+ ```
+
+ **Figure 1** Effect of clicking the button to draw a 2D image
+
+
+
+
+### Drawing a Color Triangle Using Shaders
+
+To use WebGL to draw a color triangle (GPU drawing), perform the following steps:
+
+
+1. Create a page layout. The following is an example of the **index.hml** file:
+
+ ```
+
+
+ BtnColorTriangle
+
+ ```
+
+2. Set the page style. The following is an example of the **index.css** file:
+
+ ```
+ .container {
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ }
+ .btn-button {
+ margin: 1px;
+ height: 40px;
+ width: 220px;
+ background-color: lightblue;
+ font-size: 20px;
+ text-color: blue;
+ }
+ ```
+
+3. Edit the JavaScript code file to add the logic code for drawing a color triangle. The following is an example of the **index.js** file:
+
+ ```
+ //index.js
+ import webgl from "@ohos.webglnapi"; // Import the WebGL module.
+
+ // WebGL-related predefinition
+ var gl = {
+ DEPTH_BUFFER_BIT: 0x00000100,
+ STENCIL_BUFFER_BIT: 0x00000400,
+ COLOR_BUFFER_BIT: 0x00004000,
+ POINTS: 0x0000,
+ LINES: 0x0001,
+ LINE_LOOP: 0x0002,
+ LINE_STRIP: 0x0003,
+ TRIANGLES: 0x0004,
+ TRIANGLE_STRIP: 0x0005,
+ TRIANGLE_FAN: 0x0006,
+ ZERO: 0,
+ ONE: 1,
+ SRC_COLOR: 0x0300,
+ ONE_MINUS_SRC_COLOR: 0x0301,
+ SRC_ALPHA: 0x0302,
+ ONE_MINUS_SRC_ALPHA: 0x0303,
+ DST_ALPHA: 0x0304,
+ ONE_MINUS_DST_ALPHA: 0x0305,
+ DST_COLOR: 0x0306,
+ ONE_MINUS_DST_COLOR: 0x0307,
+ SRC_ALPHA_SATURATE: 0x0308,
+ FUNC_ADD: 0x8006,
+ BLEND_EQUATION: 0x8009,
+ BLEND_EQUATION_RGB: 0x8009,
+ BLEND_EQUATION_ALPHA: 0x883D,
+ FUNC_SUBTRACT: 0x800A,
+ FUNC_REVERSE_SUBTRACT: 0x800B,
+ BLEND_DST_RGB: 0x80C8,
+ BLEND_SRC_RGB: 0x80C9,
+ BLEND_DST_ALPHA: 0x80CA,
+ BLEND_SRC_ALPHA: 0x80CB,
+ CONSTANT_COLOR: 0x8001,
+ ONE_MINUS_CONSTANT_COLOR: 0x8002,
+ CONSTANT_ALPHA: 0x8003,
+ ONE_MINUS_CONSTANT_ALPHA: 0x8004,
+ BLEND_COLOR: 0x8005,
+ ARRAY_BUFFER: 0x8892,
+ ELEMENT_ARRAY_BUFFER: 0x8893,
+ ARRAY_BUFFER_BINDING: 0x8894,
+ ELEMENT_ARRAY_BUFFER_BINDING: 0x8895,
+ STREAM_DRAW: 0x88E0,
+ STATIC_DRAW: 0x88E4,
+ DYNAMIC_DRAW: 0x88E8,
+ BUFFER_SIZE: 0x8764,
+ BUFFER_USAGE: 0x8765,
+ CURRENT_VERTEX_ATTRIB: 0x8626,
+ FRONT: 0x0404,
+ BACK: 0x0405,
+ FRONT_AND_BACK: 0x0408,
+ CULL_FACE: 0x0B44,
+ BLEND: 0x0BE2,
+ DITHER: 0x0BD0,
+ STENCIL_TEST: 0x0B90,
+ DEPTH_TEST: 0x0B71,
+ SCISSOR_TEST: 0x0C11,
+ POLYGON_OFFSET_FILL: 0x8037,
+ SAMPLE_ALPHA_TO_COVERAGE: 0x809E,
+ SAMPLE_COVERAGE: 0x80A0,
+ NO_ERROR: 0,
+ INVALID_ENUM: 0x0500,
+ INVALID_VALUE: 0x0501,
+ INVALID_OPERATION: 0x0502,
+ OUT_OF_MEMORY: 0x0505,
+ CW: 0x0900,
+ CCW: 0x0901,
+ LINE_WIDTH: 0x0B21,
+ ALIASED_POINT_SIZE_RANGE: 0x846D,
+ ALIASED_LINE_WIDTH_RANGE: 0x846E,
+ CULL_FACE_MODE: 0x0B45,
+ FRONT_FACE: 0x0B46,
+ DEPTH_RANGE: 0x0B70,
+ DEPTH_WRITEMASK: 0x0B72,
+ DEPTH_CLEAR_VALUE: 0x0B73,
+ DEPTH_FUNC: 0x0B74,
+ STENCIL_CLEAR_VALUE: 0x0B91,
+ STENCIL_FUNC: 0x0B92,
+ STENCIL_FAIL: 0x0B94,
+ STENCIL_PASS_DEPTH_FAIL: 0x0B95,
+ STENCIL_PASS_DEPTH_PASS: 0x0B96,
+ STENCIL_REF: 0x0B97,
+ STENCIL_VALUE_MASK: 0x0B93,
+ STENCIL_WRITEMASK: 0x0B98,
+ STENCIL_BACK_FUNC: 0x8800,
+ STENCIL_BACK_FAIL: 0x8801,
+ STENCIL_BACK_PASS_DEPTH_FAIL: 0x8802,
+ STENCIL_BACK_PASS_DEPTH_PASS: 0x8803,
+ STENCIL_BACK_REF: 0x8CA3,
+ STENCIL_BACK_VALUE_MASK: 0x8CA4,
+ STENCIL_BACK_WRITEMASK: 0x8CA5,
+ VIEWPORT: 0x0BA2,
+ SCISSOR_BOX: 0x0C10,
+ COLOR_CLEAR_VALUE: 0x0C22,
+ COLOR_WRITEMASK: 0x0C23,
+ UNPACK_ALIGNMENT: 0x0CF5,
+ PACK_ALIGNMENT: 0x0D05,
+ MAX_TEXTURE_SIZE: 0x0D33,
+ MAX_VIEWPORT_DIMS: 0x0D3A,
+ SUBPIXEL_BITS: 0x0D50,
+ RED_BITS: 0x0D52,
+ GREEN_BITS: 0x0D53,
+ BLUE_BITS: 0x0D54,
+ ALPHA_BITS: 0x0D55,
+ DEPTH_BITS: 0x0D56,
+ STENCIL_BITS: 0x0D57,
+ POLYGON_OFFSET_UNITS: 0x2A00,
+ POLYGON_OFFSET_FACTOR: 0x8038,
+ TEXTURE_BINDING_2D: 0x8069,
+ SAMPLE_BUFFERS: 0x80A8,
+ SAMPLES: 0x80A9,
+ RGBA8: 0x8058,
+ SAMPLE_COVERAGE_VALUE: 0x80AA,
+ SAMPLE_COVERAGE_INVERT: 0x80AB,
+ COMPRESSED_TEXTURE_FORMATS: 0x86A3,
+ DONT_CARE: 0x1100,
+ FASTEST: 0x1101,
+ NICEST: 0x1102,
+ GENERATE_MIPMAP_HINT: 0x8192,
+ BYTE: 0x1400,
+ UNSIGNED_BYTE: 0x1401,
+ SHORT: 0x1402,
+ UNSIGNED_SHORT: 0x1403,
+ INT: 0x1404,
+ UNSIGNED_INT: 0x1405,
+ FLOAT: 0x1406,
+ DEPTH_COMPONENT: 0x1902,
+ ALPHA: 0x1906,
+ RGB: 0x1907,
+ RGBA: 0x1908,
+ LUMINANCE: 0x1909,
+ LUMINANCE_ALPHA: 0x190A,
+ UNSIGNED_SHORT_4_4_4_4: 0x8033,
+ UNSIGNED_SHORT_5_5_5_1: 0x8034,
+ UNSIGNED_SHORT_5_6_5: 0x8363,
+ FRAGMENT_SHADER: 0x8B30,
+ VERTEX_SHADER: 0x8B31,
+ MAX_VERTEX_ATTRIBS: 0x8869,
+ MAX_VERTEX_UNIFORM_VECTORS: 0x8DFB,
+ MAX_VARYING_VECTORS: 0x8DFC,
+ MAX_COMBINED_TEXTURE_IMAGE_UNITS: 0x8B4D,
+ MAX_VERTEX_TEXTURE_IMAGE_UNITS: 0x8B4C,
+ MAX_TEXTURE_IMAGE_UNITS: 0x8872,
+ MAX_FRAGMENT_UNIFORM_VECTORS: 0x8DFD,
+ SHADER_TYPE: 0x8B4F,
+ DELETE_STATUS: 0x8B80,
+ LINK_STATUS: 0x8B82,
+ VALIDATE_STATUS: 0x8B83,
+ ATTACHED_SHADERS: 0x8B85,
+ ACTIVE_UNIFORMS: 0x8B86,
+ ACTIVE_ATTRIBUTES: 0x8B89,
+ SHADING_LANGUAGE_VERSION: 0x8B8C,
+ CURRENT_PROGRAM: 0x8B8D,
+ NEVER: 0x0200,
+ LESS: 0x0201,
+ EQUAL: 0x0202,
+ LEQUAL: 0x0203,
+ GREATER: 0x0204,
+ NOTEQUAL: 0x0205,
+ GEQUAL: 0x0206,
+ ALWAYS: 0x0207,
+ KEEP: 0x1E00,
+ REPLACE: 0x1E01,
+ INCR: 0x1E02,
+ DECR: 0x1E03,
+ INVERT: 0x150A,
+ INCR_WRAP: 0x8507,
+ DECR_WRAP: 0x8508,
+ VENDOR: 0x1F00,
+ RENDERER: 0x1F01,
+ VERSION: 0x1F02,
+ NEAREST: 0x2600,
+ LINEAR: 0x2601,
+ NEAREST_MIPMAP_NEAREST: 0x2700,
+ LINEAR_MIPMAP_NEAREST: 0x2701,
+ NEAREST_MIPMAP_LINEAR: 0x2702,
+ LINEAR_MIPMAP_LINEAR: 0x2703,
+ TEXTURE_MAG_FILTER: 0x2800,
+ TEXTURE_MIN_FILTER: 0x2801,
+ TEXTURE_WRAP_S: 0x2802,
+ TEXTURE_WRAP_T: 0x2803,
+ TEXTURE_2D: 0x0DE1,
+ TEXTURE: 0x1702,
+ TEXTURE_CUBE_MAP: 0x8513,
+ TEXTURE_BINDING_CUBE_MAP: 0x8514,
+ TEXTURE_CUBE_MAP_POSITIVE_X: 0x8515,
+ TEXTURE_CUBE_MAP_NEGATIVE_X: 0x8516,
+ TEXTURE_CUBE_MAP_POSITIVE_Y: 0x8517,
+ TEXTURE_CUBE_MAP_NEGATIVE_Y: 0x8518,
+ TEXTURE_CUBE_MAP_POSITIVE_Z: 0x8519,
+ TEXTURE_CUBE_MAP_NEGATIVE_Z: 0x851A,
+ MAX_CUBE_MAP_TEXTURE_SIZE: 0x851C,
+ TEXTURE0: 0x84C0,
+ TEXTURE1: 0x84C1,
+ TEXTURE2: 0x84C2,
+ TEXTURE3: 0x84C3,
+ TEXTURE4: 0x84C4,
+ TEXTURE5: 0x84C5,
+ TEXTURE6: 0x84C6,
+ TEXTURE7: 0x84C7,
+ TEXTURE8: 0x84C8,
+ TEXTURE9: 0x84C9,
+ TEXTURE10: 0x84CA,
+ TEXTURE11: 0x84CB,
+ TEXTURE12: 0x84CC,
+ TEXTURE13: 0x84CD,
+ TEXTURE14: 0x84CE,
+ TEXTURE15: 0x84CF,
+ TEXTURE16: 0x84D0,
+ TEXTURE17: 0x84D1,
+ TEXTURE18: 0x84D2,
+ TEXTURE19: 0x84D3,
+ TEXTURE20: 0x84D4,
+ TEXTURE21: 0x84D5,
+ TEXTURE22: 0x84D6,
+ TEXTURE23: 0x84D7,
+ TEXTURE24: 0x84D8,
+ TEXTURE25: 0x84D9,
+ TEXTURE26: 0x84DA,
+ TEXTURE27: 0x84DB,
+ TEXTURE28: 0x84DC,
+ TEXTURE29: 0x84DD,
+ TEXTURE30: 0x84DE,
+ TEXTURE31: 0x84DF,
+ ACTIVE_TEXTURE: 0x84E0,
+ REPEAT: 0x2901,
+ CLAMP_TO_EDGE: 0x812F,
+ MIRRORED_REPEAT: 0x8370,
+ FLOAT_VEC2: 0x8B50,
+ FLOAT_VEC3: 0x8B51,
+ FLOAT_VEC4: 0x8B52,
+ INT_VEC2: 0x8B53,
+ INT_VEC3: 0x8B54,
+ INT_VEC4: 0x8B55,
+ BOOL: 0x8B56,
+ BOOL_VEC2: 0x8B57,
+ BOOL_VEC3: 0x8B58,
+ BOOL_VEC4: 0x8B59,
+ FLOAT_MAT2: 0x8B5A,
+ FLOAT_MAT3: 0x8B5B,
+ FLOAT_MAT4: 0x8B5C,
+ SAMPLER_2D: 0x8B5E,
+ SAMPLER_CUBE: 0x8B60,
+ VERTEX_ATTRIB_ARRAY_ENABLED: 0x8622,
+ VERTEX_ATTRIB_ARRAY_SIZE: 0x8623,
+ VERTEX_ATTRIB_ARRAY_STRIDE: 0x8624,
+ VERTEX_ATTRIB_ARRAY_TYPE: 0x8625,
+ VERTEX_ATTRIB_ARRAY_NORMALIZED: 0x886A,
+ VERTEX_ATTRIB_ARRAY_POINTER: 0x8645,
+ VERTEX_ATTRIB_ARRAY_BUFFER_BINDING: 0x889F,
+ IMPLEMENTATION_COLOR_READ_TYPE: 0x8B9A,
+ IMPLEMENTATION_COLOR_READ_FORMAT: 0x8B9B,
+ COMPILE_STATUS: 0x8B81,
+ LOW_FLOAT: 0x8DF0,
+ MEDIUM_FLOAT: 0x8DF1,
+ HIGH_FLOAT: 0x8DF2,
+ LOW_INT: 0x8DF3,
+ MEDIUM_INT: 0x8DF4,
+ HIGH_INT: 0x8DF5,
+ FRAMEBUFFER: 0x8D40,
+ RENDERBUFFER: 0x8D41,
+ RGBA4: 0x8056,
+ RGB5_A1: 0x8057,
+ RGB565: 0x8D62,
+ DEPTH_COMPONENT16: 0x81A5,
+ STENCIL_INDEX8: 0x8D48,
+ DEPTH_STENCIL: 0x84F9,
+ RENDERBUFFER_WIDTH: 0x8D42,
+ RENDERBUFFER_HEIGHT: 0x8D43,
+ RENDERBUFFER_INTERNAL_FORMAT: 0x8D44,
+ RENDERBUFFER_RED_SIZE: 0x8D50,
+ RENDERBUFFER_GREEN_SIZE: 0x8D51,
+ RENDERBUFFER_BLUE_SIZE: 0x8D52,
+ RENDERBUFFER_ALPHA_SIZE: 0x8D53,
+ RENDERBUFFER_DEPTH_SIZE: 0x8D54,
+ RENDERBUFFER_STENCIL_SIZE: 0x8D55,
+ FRAMEBUFFER_ATTACHMENT_OBJECT_TYPE: 0x8CD0,
+ FRAMEBUFFER_ATTACHMENT_OBJECT_NAME: 0x8CD1,
+ FRAMEBUFFER_ATTACHMENT_TEXTURE_LEVEL: 0x8CD2,
+ FRAMEBUFFER_ATTACHMENT_TEXTURE_CUBE_MAP_FACE: 0x8CD3,
+ COLOR_ATTACHMENT0: 0x8CE0,
+ DEPTH_ATTACHMENT: 0x8D00,
+ STENCIL_ATTACHMENT: 0x8D20,
+ DEPTH_STENCIL_ATTACHMENT: 0x821A,
+ NONE: 0,
+ FRAMEBUFFER_COMPLETE: 0x8CD5,
+ FRAMEBUFFER_INCOMPLETE_ATTACHMENT: 0x8CD6,
+ FRAMEBUFFER_INCOMPLETE_MISSING_ATTACHMENT: 0x8CD7,
+ FRAMEBUFFER_INCOMPLETE_DIMENSIONS: 0x8CD9,
+ FRAMEBUFFER_UNSUPPORTED: 0x8CDD,
+ FRAMEBUFFER_BINDING: 0x8CA6,
+ RENDERBUFFER_BINDING: 0x8CA7,
+ MAX_RENDERBUFFER_SIZE: 0x84E8,
+ INVALID_FRAMEBUFFER_OPERATION: 0x0506,
+ UNPACK_FLIP_Y_WEBGL: 0x9240,
+ UNPACK_PREMULTIPLY_ALPHA_WEBGL: 0x9241,
+ CONTEXT_LOST_WEBGL: 0x9242,
+ UNPACK_COLORSPACE_CONVERSION_WEBGL: 0x9243,
+ BROWSER_DEFAULT_WEBGL: 0x9244,
+ TEXTURE_MAX_LOD: 0x813B,
+ TEXTURE_BASE_LEVEL: 0x813C,
+ TEXTURE_IMMUTABLE_FORMAT: 0x912F,
+ UNIFORM_BLOCK_BINDING: 0x8A3F,
+ UNIFORM_BLOCK_DATA_SIZE: 0x8A40,
+ UNIFORM_BLOCK_ACTIVE_UNIFORMS: 0x8A42,
+ UNIFORM_BLOCK_ACTIVE_UNIFORM_INDICES: 0x8A43,
+ UNIFORM_BLOCK_REFERENCED_BY_VERTEX_SHADER: 0x8A44,
+ UNIFORM_BLOCK_REFERENCED_BY_FRAGMENT_SHADER: 0x8A46,
+ RED: 0x1903,
+ PIXEL_UNPACK_BUFFER: 0x88EC,
+ RGB8: 0x8051,
+ R16F: 0x822D,
+ COPY_WRITE_BUFFER: 0x8F37,
+ TEXTURE_3D: 0x806F,
+ COMPRESSED_R11_EAC: 0x9270,
+ COPY_READ_BUFFER: 0x8F36,
+ TRANSFORM_FEEDBACK_BUFFER: 0x8C8E,
+ TRANSFORM_FEEDBACK_BUFFER_BINDING: 0x8C8F,
+ TRANSFORM_FEEDBACK_BUFFER_SIZE: 0x8C85,
+ TRANSFORM_FEEDBACK_BUFFER_START: 0x8C84,
+ UNIFORM_BUFFER_BINDING: 0x8A28,
+ UNIFORM_BUFFER_SIZE: 0x8A2A,
+ UNIFORM_BUFFER_START: 0x8A29,
+ DYNAMIC_READ: 0x88E9,
+ READ_FRAMEBUFFER: 0x8CA8,
+ COLOR_ATTACHMENT1: 0x8CE1,
+ INTERLEAVED_ATTRIBS: 0x8C8C,
+ UNIFORM_OFFSET: 0x8A3B,
+ UNIFORM_TYPE: 0x8A37,
+ UNIFORM_SIZE: 0x8A38,
+ UNIFORM_BLOCK_INDEX: 0x8A3A,
+ UNIFORM_ARRAY_STRIDE: 0x8A3C,
+ UNIFORM_MATRIX_STRIDE: 0x8A3D,
+ UNIFORM_IS_ROW_MAJOR: 0x8A3E,
+ TEXTURE_MAX_ANISOTROPY_EXT: 0x84FE
+ }
+
+ // Vertex shader
+ var VSHADER_SOURCE =
+ 'attribute vec4 a_Position;\n' + // Attribute variable
+ 'attribute vec4 a_Color;\n' +
+ 'varying vec4 v_Color;\n' +
+ 'void main() {\n' +
+ ' gl_Position = a_Position;\n' + // Set the vertex coordinates of the point.
+ ' v_Color = a_Color;\n' +
+ '}\n';
+
+ // Fragment shader
+ var FSHADER_SOURCE =
+ 'precision mediump float;\n' +
+ 'varying vec4 v_Color;\n' +
+ 'void main() {\n' +
+ ' gl_FragColor = v_Color;\n' +
+ '}\n';
+
+ function initVertexBuffers(gl) {
+ // Vertex coordinates and colors
+ var verticesColors = new Float32Array([
+ 0.0, -0.5, 1.0, 0.0, 0.0,
+ -0.5, -0.8, 0.0, 1.0, 0.0,
+ 0.5, -0.8, 0.0, 0.0, 1.0,
+ ]);
+
+ var n = 3; // Number of vertices
+ var FSIZE = verticesColors.BYTES_PER_ELEMENT; // Number of bytes of each element in the array
+
+ // Create a Buffer object.
+ var vertexBuffer = gl.createBuffer();
+ if (!vertexBuffer) {
+ console.log('Failed to create the buffer object');
+ return -1;
+ }
+
+ // Bind the Buffer object to the target.
+ gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+ // Write data to the Buffer object.
+ gl.bufferData(gl.ARRAY_BUFFER, verticesColors.buffer, gl.STATIC_DRAW);
+
+ // Obtain the address of the attribute variable a_Position in the shader.
+ var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
+ if (a_Position < 0) {
+ console.log('Failed to get the storage location of a_Position');
+ return -1;
+ }
+ // Allocate the Buffer object to the a_Position variable.
+ gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 5 * FSIZE, 0);
+
+ // Connect the a_Position variable to the Buffer object allocated to it.
+ gl.enableVertexAttribArray(a_Position);
+
+ // Obtain the address of the attribute variable a_Color in the shader.
+ var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
+ if (a_Color < 0) {
+ console.log('Failed to get the storage location of a_Color');
+ return -1;
+ }
+ // Allocate the Buffer object to the a_Color variable.
+ gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
+
+ // Connect the a_Color variable to the Buffer object allocated to it.
+ gl.enableVertexAttribArray(a_Color);
+
+ // Unbind the Buffer object.
+ gl.bindBuffer(gl.ARRAY_BUFFER, null);
+
+ return n;
+ }
+
+ /**
+ * Creates a program object and makes it as the current object.
+ * @param gl Indicates the WebGL context.
+ * @param vshader Indicates a vertex shader program (string).
+ * @param fshader Indicates a fragment shader program (string).
+ * @return Returns true if the WebGLProgram object was created and successfully made as the current object; returns false otherwise.
+ */
+ function initShaders(gl, vshader, fshader) {
+ var program = createProgram(gl, vshader, fshader);
+ console.log("======createProgram program: " + program);
+
+ if (!program) {
+ console.log('Failed to create program');
+ return false;
+ }
+ gl.useProgram(program);
+ gl.program = program;
+
+ return true;
+ }
+
+ /**
+ * Creates a linked program object.
+ * @param gl Indicates the WebGL context.
+ * @param vshader Indicates a vertex shader program (string).
+ * @param fshader Indicates a fragment shader program (string).
+ * @return Returns the created program object if the operation is successful; returns null otherwise.
+ */
+ function createProgram(gl, vshader, fshader) {
+ console.log("======createProgram start======");
+ // Create shader object
+ var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
+ console.log("======vertexShader: " + vertexShader);
+ var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
+ if (!vertexShader || !fragmentShader) {
+ return null;
+ }
+
+ // Create a program object.
+ var program = gl.createProgram();
+ console.log("======createProgram program: " + program);
+
+ if (!program) {
+ return null;
+ }
+
+ // Attach the shader objects.
+ gl.attachShader(program, vertexShader);
+ gl.attachShader(program, fragmentShader);
+
+ // Link the program object.
+ gl.linkProgram(program);
+
+ // Check the result of linking.
+ var linked = gl.getProgramParameter(program, 0x8B82);
+ console.log("======getProgramParameter linked: " + linked);
+
+ if (!linked) {
+ var error = gl.getProgramInfoLog(program);
+ console.log('Failed to link the program: ' + error);
+ gl.deleteProgram(program);
+ gl.deleteShader(fragmentShader);
+ gl.deleteShader(vertexShader);
+ return null;
+ }
+ return program;
+ }
+
+ /**
+ * Creates a shader object.
+ * @param gl Indicates the WebGL context.
+ * @param type Indicates the type of the shader object to be created.
+ * @param source Indicates the shader program (string).
+ * @return Returns the created shader object if the operation is successful; returns false otherwise.
+ */
+ function loadShader(gl, type, source) {
+ console.log("======into loadShader====");
+ // Create shader object
+ var shader = gl.createShader(type);
+ if (shader == null) {
+ console.log('Failed to create the shader.');
+ return null;
+ }
+
+ // Set the shader program.
+ gl.shaderSource(shader, source);
+
+ // Compile the shader.
+ gl.compileShader(shader);
+
+ // Check the result of compilation.
+ var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
+ if (!compiled) {
+ var error = gl.getShaderInfoLog(shader);
+ console.log('Failed to compile the shader: ' + error);
+ gl.deleteShader(shader);
+ return null;
+ }
+
+ return shader;
+ }
+
+ export default {
+ data: {
+ title: "DEMO BY TEAMOL",
+ fit:"cover",
+ fits: ["cover", "contain", "fill", "none", "scale-down"]
+ }
+ ,onInit() {
+ this.title = this.$t('strings.world');
+ }
+ ,BtnColorTriangle() {
+ // Obtain the component.
+ const el = this.$refs.canvas1;
+ // Obtain the WebGL context.
+ var gl = el.getContext('webgl');
+
+ if (!gl) {
+ console.log('Failed to get the rendering context for WebGL');
+ return;
+ }
+
+ // Initialize the shader.
+ if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
+ console.log('Failed to intialize shaders.');
+ return;
+ }
+
+ // Set the vertex position.
+ var n = initVertexBuffers(gl);
+ if (n < 0) {
+ console.log('Failed to set the positions of the vertices');
+ return;
+ }
+
+ // Specify the color of to be cleared.
+ gl.clearColor(0.0, 0.0, 0.0, 1.0);
+
+ // Clear .
+ gl.clear(gl.COLOR_BUFFER_BIT);
+
+ // Draw a triangle.
+ gl.drawArrays(gl.TRIANGLES, 0, n);
+
+ // Clear the buffer.
+ gl.flush();
+ }
+ }
+ ```
+
+
+ **Figure 2** Effect of clicking the button to draw a color triangle
+
+
diff --git a/en/application-dev/webgl/webgl-overview.md b/en/application-dev/webgl/webgl-overview.md
new file mode 100644
index 0000000000000000000000000000000000000000..0dabbaf506edc1d7218d11ddd7eb64efe541fb9b
--- /dev/null
+++ b/en/application-dev/webgl/webgl-overview.md
@@ -0,0 +1,47 @@
+# WebGL Overview
+
+Web Graphic Library (WebGL) is used for rendering interactive 2D and 3D graphics. WebGL used in OpenHarmony is based on OpenGL for Embedded Systems (OpenGL ES). It can be used in the **<canvas>** object of HTML5 without using plug-ins and supports cross-platform. WebGL is programmed by JavaScript code. Its APIs can implement graphics rendering and acceleration by using GPU hardware provided by the user equipment.
+
+
+## Basic Concepts
+
+
+### Shader
+
+Shaders are instructions and data that run in a graphics card. In WebGL, shaders are written in the OpenGL Shading Language (GLSL).
+
+There are vertex shaders and fragment shaders. The interaction between vertex shaders and fragment shaders involves rasterization.
+
+- The vertex shader is mainly used to receive the coordinates of a point in a 3D space, process the coordinates into coordinates in a 2D space, and output the coordinates.
+
+- The fragment shader is mainly used to output a color value for each pixel being processed.
+
+- Rasterization is the process of converting the coordinates output by the vertex shader into pixels to be processed and passing the pixels to the fragment shader.
+
+
+### Buffer
+
+The buffer is a JavaScript object that resides in memory and stores the **attribute** object to be pushed to the shader.
+
+
+### WebGLProgram
+
+The WebGLProgram is a JavaScript object responsible for associating the shader with the buffer. A **WebGLProgram** object consists of two compiled WebGL shaders: a vertex shader and a fragment shader.
+
+
+## Working Principles
+
+ **Figure 1** WebGL working principles
+
+
+
+
+- An application draws UI components using HTML5 at the foreground.
+
+- Native APIs complete the interaction between JavaScript and C++ code.
+
+- QuickJS and V8 are graphics frameworks that provide the **Surface** object for the WebGL module.
+
+- The WebGL module exposes the GPU drawing APIs of OpenGL ES.
+
+- The Embedded Graphics Library (EGL) implements adaptation to different platforms.
diff --git a/zh-cn/application-dev/Readme-CN.md b/zh-cn/application-dev/Readme-CN.md
index 112dabfdd80ad86b9e50e1e6ee9b54eca5ffc991..e91b5d97f37a5254720235875d1a4d78b9bf29d6 100644
--- a/zh-cn/application-dev/Readme-CN.md
+++ b/zh-cn/application-dev/Readme-CN.md
@@ -16,5 +16,6 @@
- [数据管理](database/Readme-CN.md)
- [USB服务](usb/Readme-CN.md)
- [DFX](dfx/Readme-CN.md)
+- [WebGL](webgl/Readme-CN.md)
- [开发参考](reference/Readme-CN.md)
diff --git a/zh-cn/application-dev/ability/Readme-CN.md b/zh-cn/application-dev/ability/Readme-CN.md
index 202dc4ca4253a99c5cb7a91f724b85cd2656fcdf..ae4403f9cf0425e51eccd71df27651e875911c79 100644
--- a/zh-cn/application-dev/ability/Readme-CN.md
+++ b/zh-cn/application-dev/ability/Readme-CN.md
@@ -5,4 +5,6 @@
* [基于Native的Data Ability创建与访问](data-ability-creating-accessing.md)
* [CommonEvent开发指南](common-event.md)
* [Notification开发指南](notification.md)
+* [应用迁移开发指导](ability-continuation.md)
+* [Ability助手使用指导](ability-assistant-guidelines.md)
diff --git a/zh-cn/application-dev/ability/ability-assistant-guidelines.md b/zh-cn/application-dev/ability/ability-assistant-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..6db0306ab489467b9e7b39065c2117822fc2c8e2
--- /dev/null
+++ b/zh-cn/application-dev/ability/ability-assistant-guidelines.md
@@ -0,0 +1,103 @@
+# Ability助手使用指导
+
+Ability assistant(Ability助手,简称为aa)是实现应用、原子化服务及测试用例启动功能,为开发者提供基本的调试及测试应用的工具。通过该工具,开发者可以在hdc shell中,发出命令以执行各种系统操作,比如启动Ability、强制停止进程、打印Ability相关信息等。
+
+## 开发指导
+
+工具已在设备环境预置,开发者可直接通过命令行调用。
+
+### 查询相关
+
+- **help**
+
+ 用于显示aa相关的帮助信息。
+
+ **返回值:**
+
+ 返回对应的帮助信息。
+
+ **使用方法:**
+
+ ```
+ aa help
+ ```
+
+### Ability相关
+
+- **start**
+
+ 用于启动一个ability。
+
+ | 参数 | 参数说明 |
+ | --------- | ---------------------- |
+ | -h/--help | 帮助信息。 |
+ | -d | 可选参数,device id |
+ | -a | 必选参数,ability name |
+ | -b | 必选参数,bundle name |
+ | -D | 可选参数,调试模式 |
+
+ **返回值:**
+
+ 当成功启动Ability时,返回“start ability successfully.”;当启动失败时,返回“error: failed to start ability.”。
+
+ 使用方法:
+
+ ```
+aa start [-d ] -a -b [-D]
+ ```
+
+- **stop-service**
+
+ 用于停止Service Ability。
+
+ | 参数 | 参数说明 |
+ | --------- | ------------------------ |
+ | -h/--help | 帮助信息。 |
+ | -d | 可选参数,device id。 |
+ | -a | 必选参数,ability name。 |
+ | -b | 必选参数,bundle name。 |
+
+ **返回值:**
+
+ 当成功停止Service Ability时,返回“stop service ability successfully.”;当停止失败时,返回“error: failed to stop service ability.”。
+
+ 使用方法:
+
+ ```
+aa stop-service [-d ] -a -b
+ ```
+
+- **dump**
+
+ 用于打印Ability的相关信息。
+
+ | 参数 | 参数说明 |
+ | ---------------------- | -------------------------------------- |
+ | -h/--help | 帮助信息。 |
+ | -a/--all | 打印所有mission内的Ability。 |
+ | -s/--stack \ | 打印指定mission stack内的Ability。 |
+ | -m/--mission \ | 打印指定mission内的Ability。 |
+ | -l/--stack-list | 打印每个mission stack内的mission列表。 |
+ | -u/--ui | 打印system ui Ability。 |
+ | -e/--serv | 打印Service Ability。 |
+ | -d/--data | 打印Data Ability。 |
+
+ **使用方法:**
+
+ ```
+ aa dump -a
+ ```
+
+- **force-stop**
+
+ 通过bundle name强制停止一个进程。
+
+ **返回值:**
+
+ 当成功强制停止该进程时,返回“force stop process successfully.”;当强制停止失败时,返回“error: failed to force stop process.”。
+
+ **使用方法:**
+
+ ```
+ aa force-stop
+ ```
\ No newline at end of file
diff --git a/zh-cn/application-dev/connectivity/ipc-rpc.md b/zh-cn/application-dev/connectivity/ipc-rpc.md
deleted file mode 100644
index b28f4d1c71d5cfa7c7d09ca22ca904cb8fa85ca3..0000000000000000000000000000000000000000
--- a/zh-cn/application-dev/connectivity/ipc-rpc.md
+++ /dev/null
@@ -1,8 +0,0 @@
-# IPC与RPC通信
-
-
-- **[IPC与RPC通信概述](ipc-rpc-overview.md)**
-
-- **[IPC与RPC通信开发指导](ipc-rpc-development-guideline.md)**
-
-- **[远端状态订阅开发实例](subscribe-remote-state.md)**
\ No newline at end of file
diff --git a/zh-cn/application-dev/reference/apis/Readme-CN.md b/zh-cn/application-dev/reference/apis/Readme-CN.md
index d2d2b8b140eff271208998905f76ea00c173fd3d..837523f1a20f18fed4ab7fb79c4aa21929dda1e5 100644
--- a/zh-cn/application-dev/reference/apis/Readme-CN.md
+++ b/zh-cn/application-dev/reference/apis/Readme-CN.md
@@ -18,9 +18,11 @@
- 媒体
- [音频管理](js-apis-audio.md)
- [媒体服务](js-apis-media.md)
+ - [图片处理](js-apis-image.md)
- 安全
- [用户认证](js-apis-useriam-userauth.md)
- [访问控制](js-apis-abilityAccessCtrl.md)
+ - [通用密钥库系统](js-apis-huks.md)
- 数据管理
- [轻量级存储](js-apis-data-preferences.md)
- [轻量级存储(废弃 since 8)](js-apis-data-storage.md)
@@ -46,6 +48,7 @@
- [SIM卡管理](js-apis-sim.md)
- [网络搜索](js-apis-radio.md)
- [observer](js-apis-observer.md)
+ - [蜂窝数据](js-apis-telephony-data.md)
- 网络与连接
- [WLAN](js-apis-wifi.md)
- [Bluetooth](js-apis-bluetooth.md)
@@ -55,6 +58,7 @@
- [屏幕亮度](js-apis-brightness.md)
- [电量信息](js-apis-battery-info.md)
- [系统电源管理](js-apis-power.md)
+ - [热管理](js-apis-thermal.md)
- [Runninglock锁](js-apis-runninglock.md)
- [设备信息](js-apis-device-info.md)
- [系统属性](js-apis-system-parameter.md)
diff --git a/zh-cn/application-dev/reference/apis/js-apis-huks.md b/zh-cn/application-dev/reference/apis/js-apis-huks.md
index 8d9a01f2137540140e64632ab0fe23e063196b98..6efd2885bf3807dd7337ddc920aeb38ed42aab11 100755
--- a/zh-cn/application-dev/reference/apis/js-apis-huks.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-huks.md
@@ -9,7 +9,7 @@ HUKS所管理的密钥可以由应用导入或者由应用调用HUKS接口生成
```js
import huks from '@ohos.security.huks'
```
-## huks.HuksErrorCode
+## HuksErrorCode
表示错误码的枚举。
@@ -84,7 +84,7 @@ import huks from '@ohos.security.huks'
| HUKS_ERROR_UNKNOWN_ERROR | -1000 |表示未知错误。 **系统能力**:SystemCapability.Security.Huks|
-## huks.HuksKeyPurpose
+## HuksKeyPurpose
表示密钥(密钥对)用途。
@@ -100,7 +100,7 @@ import huks from '@ohos.security.huks'
| HUKS_KEY_PURPOSE_MAC | 128 | 表示密钥用于生成mac消息验证码。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_KEY_PURPOSE_AGREE | 256 | 表示密钥对用于进行密钥协商。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksKeyDigest
+## HuksKeyDigest
表示摘要算法。
@@ -114,7 +114,7 @@ import huks from '@ohos.security.huks'
| HUKS_DIGEST_SHA384 | 13 | 表示SHA384摘要算法。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_DIGEST_SHA512 | 14 | 表示SHA512摘要算法。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksKeyPadding
+## HuksKeyPadding
表示补齐算法。
@@ -127,7 +127,7 @@ import huks from '@ohos.security.huks'
| HUKS_PADDING_PKCS5 | 4 | 表示使用PKCS5补齐算法。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_PADDING_PKCS7 | 5 | 表示使用PKCS7补齐算法。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksCipherMode
+## HuksCipherMode
表示加密模式。
@@ -140,7 +140,7 @@ import huks from '@ohos.security.huks'
| HUKS_MODE_CCM | 31 | 表示使用CCM加密模式。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_MODE_GCM | 32 | 表示使用GCM加密模式。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksKeySize
+## HuksKeySize
表示密钥(密钥对)长度。
@@ -165,7 +165,7 @@ import huks from '@ohos.security.huks'
| HUKS_DH_KEY_SIZE_3072 | 3072 | 表示使用DH算法的密钥对长度为3072bit。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_DH_KEY_SIZE_4096 | 4096 | 表示使用DH算法的密钥对长度为4096bit。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksKeyAlg
+## HuksKeyAlg
表示密钥使用的算法。
@@ -183,7 +183,7 @@ import huks from '@ohos.security.huks'
| HUKS_ALG_ED25519 | 102 | 表示使用ED25519算法。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_ALG_DH | 103 | 表示使用DH算法。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksKeyGenerateType
+## HuksKeyGenerateType
表示生成密钥的类型。
@@ -193,7 +193,7 @@ import huks from '@ohos.security.huks'
| HUKS_KEY_GENERATE_TYPE_DERIVE | 1 | 派生生成的密钥。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_KEY_GENERATE_TYPE_AGREE | 2 | 协商生成的密钥。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksKeyFlag
+## HuksKeyFlag
表示密钥的产生方式。
@@ -204,7 +204,7 @@ import huks from '@ohos.security.huks'
| HUKS_KEY_FLAG_AGREE_KEY | 3 | 表示通过生成密钥协商接口生成的密钥。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_KEY_FLAG_DERIVE_KEY | 4 | 表示通过生成密钥派生接口生成的密钥。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksKeyStorageType
+## HuksKeyStorageType
表示密钥存储方式。
@@ -213,14 +213,14 @@ import huks from '@ohos.security.huks'
| HUKS_STORAGE_TEMP | 0 | 表示通过本地直接管理密钥。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_STORAGE_PERSISTENT | 1 | 表示通过HUKS service管理密钥。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksSendType
+## HuksSendType
| 名称 | 值 | 说明 |
| -------------------- | ---- | ------------------------------------------------------------ |
| HUKS_SEND_TYPE_ASYNC | 0 | 表示异步发送TAG。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_SEND_TYPE_SYNC | 1 | 表示同步发送TAG。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksTagType
+## HuksTagType
表示Tag的数据类型。
@@ -233,7 +233,7 @@ import huks from '@ohos.security.huks'
| HUKS_TAG_TYPE_BOOL | 4 << 28 | 表示该Tag的数据类型为boolean。 **系统能力**:SystemCapability.Security.Huks |
| HUKS_TAG_TYPE_BYTES | 5 << 28 | 表示该Tag的数据类型为Uint8Array。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksTag
+## HuksTag
表示调用参数的Tag。
@@ -318,9 +318,7 @@ import huks from '@ohos.security.huks'
## huks.generateKey
-目前有两种方式:
-
-- generateKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void
+generateKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\) : void
通过Callback方法生成密钥(密钥对)。
@@ -367,10 +365,9 @@ var options = {
huks.generateKey(alias, options, function (err, data){});
```
+## huks.generateKey
-
-
-- generateKey(keyAlias: string, options: HuksOptions) : Promise
+generateKey(keyAlias: string, options: HuksOptions) : Promise\
通过Promise方法生成密钥(密钥对)。
@@ -424,9 +421,7 @@ var result = await huks.generateKey(alias, options);
## huks.deleteKey
-目前有两种方式:
-
-- deleteKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void
+deleteKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\) : void
针对Callback生成的密钥进行删除。
@@ -448,9 +443,9 @@ var emptyOptions = {
huks.deleteKey(alias, emptyOptions, function (err, data) {});
```
+## huks.deleteKey
-
-- deleteKey(keyAlias: string, options: HuksOptions) : Promise
+deleteKey(keyAlias: string, options: HuksOptions) : Promise\
针对Promise生成的密钥进行删除。
@@ -506,9 +501,7 @@ var result = await huks.getSdkVersion(emptyOptions);
## huks.importKey
-目前有两种方式:
-
-- importKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void
+importKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\) : void
导入Callback方法生成的密钥对 。
@@ -518,7 +511,7 @@ var result = await huks.getSdkVersion(emptyOptions);
| -------- | ------------------------ | ---- | ------------------------------------------------- |
| keyAlias | string | 是 | 密钥别名,用于存放所需密钥。 **系统能力**:SystemCapability.Security.Huks |
| options | [HuksOptions](#huksoptions) | 是 | 用于导入时所需TAG和需要导入的密钥。 **系统能力**:SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HuksResult](huksresult)> | 是 | 返回HUKS_SUCCESS时表示接口使用成功,其他时为错误。 **系统能力**:SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HuksResult](#huksresult)> | 是 | 返回HUKS_SUCCESS时表示接口使用成功,其他时为错误。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -552,11 +545,11 @@ var options = {
huks.importKey(keyAlias, options, function (err, data){});
```
+## huks.importKey
+importKey(keyAlias: string, options: HuksOptions) : Promise\
-- importKey(keyAlias: string, options: HuksOptions) : Promise
-
-导入Promise方法生成的密钥对
+导入Promise方法生成的密钥对。
**参数:**
@@ -605,19 +598,17 @@ var result = await huks.importKey(keyAlias, options);
## huks.exportKey
-目前有两种方式:
-
-- exportKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void
+exportKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\) : void
导出Callback方法生成的密钥对。
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| -------- | ---------------------------------------- | ---- | ------------------------------------------------------------ |
-| keyAlias | string | 是 | 密钥别名,应与所用密钥生成时使用的别名相同。 **系统能力**:SystemCapability.Security.Huks |
-| options | [HuksOptions](#huksoptions) | 是 | 空对象(此处传空即可)。 **系统能力**:SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HuksResult](huksresult)> | 是 | 返回HUKS_SUCCESS时表示接口使用成功,其他时为错误。outData:返回从密钥中导出的公钥。 **系统能力**:SystemCapability.Security.Huks |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | ----------------------------------------- | ---- | ------------------------------------------------------------ |
+| keyAlias | string | 是 | 密钥别名,应与所用密钥生成时使用的别名相同。 **系统能力**:SystemCapability.Security.Huks |
+| options | [HuksOptions](#huksoptions) | 是 | 空对象(此处传空即可)。 **系统能力**:SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HuksResult](#huksresult)> | 是 | 返回HUKS_SUCCESS时表示接口使用成功,其他时为错误。outData:返回从密钥中导出的公钥。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -629,9 +620,9 @@ var emptyOptions = {
huks.exportKey(keyAlias, emptyOptions, function (err, data){});
```
+## huks.exportKey
-
-- exportKey(keyAlias: string, options: HuksOptions) : Promise
+exportKey(keyAlias: string, options: HuksOptions) : Promise\
导出Promise方法生成的密钥对。
@@ -660,9 +651,7 @@ var result = await huks.exportKey(keyAlias, emptyOptions);
## huks.getKeyProperties
-目前有两种方式:
-
-- getKeyProperties(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void
+getKeyProperties(keyAlias: string, options: HuksOptions, callback: AsyncCallback\) : void
获取Callback方法生成的密钥属性。
@@ -684,9 +673,9 @@ var emptyOptions = {
huks.getKeyProperties(keyAlias, emptyOptions, function (err, data){});
```
+## huks.getKeyProperties
-
-- getKeyProperties(keyAlias: string, options: HuksOptions) : Promise
+getKeyProperties(keyAlias: string, options: HuksOptions) : Promise\
获取Promise方法生成的密钥属性。
@@ -715,9 +704,7 @@ var result = await huks.getKeyProperties(keyAlias, emptyOptions);
## huks.isKeyExist
-目前有两种方式:
-
-- isKeyExist(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void
+isKeyExist(keyAlias: string, options: HuksOptions, callback: AsyncCallback\) : void
判断Callback方法生成的密钥是否存在 。
@@ -727,7 +714,7 @@ var result = await huks.getKeyProperties(keyAlias, emptyOptions);
| -------- | ---------------------- | ---- | ------------------------------------- |
| keyAlias | string | 是 | 所需查找的密钥的别名。 **系统能力**:SystemCapability.Security.Huks |
| options | [HuksOptions](#huksoptions) | 是 | 空对象(此处传空即可)。 **系统能力**:SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[boolean](#boolean)> | 是 | FALSE代表密钥不存在,TRUE代表密钥存在。 **系统能力**:SystemCapability.Security.Huks |
+| callback | AsyncCallback\ | 是 | FALSE代表密钥不存在,TRUE代表密钥存在。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -739,9 +726,9 @@ var emptyOptions = {
huks.isKeyExist(keyAlias, emptyOptions, function (err, data){});
```
+## huks.isKeyExist
-
-- isKeyExist(keyAlias: string, options: HuksOptions) : Promise
+isKeyExist(keyAlias: string, options: HuksOptions) : Promise\
判断Promise方法生成的密钥是否存在 。
@@ -754,9 +741,9 @@ huks.isKeyExist(keyAlias, emptyOptions, function (err, data){});
**返回值:**
-| 类型 | 说明 |
-| ----------------------------- | ------------------------------------------------------------ |
-| Promise\<[boolean](#boolean)> | FALSE代表密钥不存在,TRUE代表密钥存在。 **系统能力**:SystemCapability.Security.Huks |
+| 类型 | 说明 |
+| ----------------- | ------------------------------------------------------------ |
+| Promise\ | FALSE代表密钥不存在,TRUE代表密钥存在。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -771,10 +758,9 @@ var result = await huks.isKeyExist(keyAlias, emptyOptions);
## huks.init
-Init操作接口,目前有两种方式:
-- init(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void
+init(keyAlias: string, options: HuksOptions, callback: AsyncCallback\) : void
-使用callback回调异步返回结果 。
+init操作接口,使用callback回调异步返回结果 。
**参数:**
@@ -782,7 +768,7 @@ Init操作接口,目前有两种方式:
| -------- | ---------------------- | ---- | ------------------------------------- |
| keyAlias | string | 是 | Init操作密钥的别名。 **系统能力**:SystemCapability.Security.Huks |
| options | [HuksOptions](#huksoptions) | 是 | Init操作的参数集合。 **系统能力**:SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HuksHandle](#HuksHandle)> | 是 | 将Init操作操作返回的handle添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HuksHandle](#hukshandle)> | 是 | 将Init操作操作返回的handle添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -813,9 +799,11 @@ huks.init(alias, options, function(err, data) {
})
```
-- init(keyAlias: string, options: HuksOptions) : Promise
+## huks.init
+
+init(keyAlias: string, options: HuksOptions) : Promise\
-使用Promise方式异步返回结果。
+init操作接口,使用Promise方式异步返回结果。
**参数:**
@@ -823,7 +811,7 @@ huks.init(alias, options, function(err, data) {
| -------- | ---------------------- | ---- | ------------------------------------- |
| keyAlias | string | 是 | Init操作密钥的别名。 **系统能力**:SystemCapability.Security.Huks |
| options | [HuksOptions](#huksoptions) | 是 | Init参数集合。 **系统能力**:SystemCapability.Security.Huks |
-| promise | Promise\<[HuksHandle](#HuksHandle)> | 是 | 将Init操作返回的handle添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
+| promise | Promise\<[HuksHandle](#hukshandle)> | 是 | 将Init操作返回的handle添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -863,10 +851,9 @@ huks.init(alias, options).then((data) => {
## huks.update
-update操作接口,目前有两种方式:
-- update(handle: number, token?: Uint8Array, options: HuksOptions, callback: AsyncCallback) : void
+update(handle: number, token?: Uint8Array, options: HuksOptions, callback: AsyncCallback\) : void
-使用callback回调异步返回结果 。
+update操作接口,使用callback回调异步返回结果 。
**参数:**
@@ -875,7 +862,7 @@ update操作接口,目前有两种方式:
| handle | number | 是 | Update操作的handle。 **系统能力**:SystemCapability.Security.Huks |
| token | Uint8Array | 否 | Update操作的token。 **系统能力**:SystemCapability.Security.Huks |
| options | [HuksOptions](#huksoptions) | 是 | Update的参数集合。 **系统能力**:SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HksResult](#HksResult)> | 是 | 将Update操作的结果添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HksResult](#hksresult)> | 是 | 将Update操作的结果添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -899,9 +886,11 @@ var options = {
huks.update(handle, options, function (err, data){});
```
-- update(handle: number, token?: Uint8Array, options: HuksOptions) : Promis
+## huks.update
+
+update(handle: number, token?: Uint8Array, options: HuksOptions) : Promis
-使用Promise方式异步返回结果。
+update操作接口,使用Promise方式异步返回结果。
**参数:**
@@ -910,7 +899,7 @@ huks.update(handle, options, function (err, data){});
| handle | number | 是 | Update操作的handle。 **系统能力**:SystemCapability.Security.Huks |
| token | Uint8Array | 否 | Update操作的token。 **系统能力**:SystemCapability.Security.Huks |
| options | [HuksOptions](#huksoptions) | 是 | Update操作的参数集合。 **系统能力**:SystemCapability.Security.Huks |
-| promise | Promise\<[HuksResult](#HuksResult)> | 是 | 将Update操作的结果添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
+| promise | Promise\<[HuksResult](#huksresult)> | 是 | 将Update操作的结果添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -938,10 +927,9 @@ var result = huks.update(handle, options)
## huks.finish
-finish操作接口,目前有两种方式:
-- finish(handle: number, options: HuksOptions, callback: AsyncCallback) : void
+finish(handle: number, options: HuksOptions, callback: AsyncCallback\) : void
-使用callback回调异步返回结果 。
+finish操作接口,使用callback回调异步返回结果 。
**参数:**
@@ -949,7 +937,7 @@ finish操作接口,目前有两种方式:
| -------- | ---------------------- | ---- | ------------------------------------- |
| handle | number | 是 | Finish操作的handle。 **系统能力**:SystemCapability.Security.Huks |
| options | [HuksOptions](#huksoptions) | 是 | Finish的参数集合。 **系统能力**:SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HksResult](#HksResult)> | 是 | 将Finish操作的结果添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HksResult](#hksresult)> | 是 | 将Finish操作的结果添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -973,9 +961,11 @@ var options = {
huks.finish(handle, options, function (err, data){});
```
-- finish(handle: number, options: HuksOptions) : Promise
+## huks.finish
+
+finish(handle: number, options: HuksOptions) : Promise\
-使用Promise方式异步返回结果。
+finish操作接口,使用Promise方式异步返回结果。
**参数:**
@@ -1012,10 +1002,9 @@ var result = huks.finish(handle, options)
## huks.abort
-abort操作接口,目前有两种方式:
-- abort(handle: number, options: HuksOptions, callback: AsyncCallback) : void
+abort(handle: number, options: HuksOptions, callback: AsyncCallback\) : void
-使用callback回调异步返回结果 。
+abort操作接口,使用callback回调异步返回结果 。
**参数:**
@@ -1023,7 +1012,7 @@ abort操作接口,目前有两种方式:
| -------- | ---------------------- | ---- | ------------------------------------- |
| handle | number | 是 | Abort操作的handle。 **系统能力**:SystemCapability.Security.Huks |
| options | [HuksOptions](#huksoptions) | 是 | Abort操作的参数集合。 **系统能力**:SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HksResult](#HksResult)> | 是 | 将Abort操作的结果添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HksResult](#hksresult)> | 是 | 将Abort操作的结果添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -1047,9 +1036,11 @@ var options = {
huks.abort(handle, options, function (err, data){});
```
-- abort(handle: number, options: HuksOptions) : Promise;
+## huks.abort
+
+abort(handle: number, options: HuksOptions) : Promise\;
-使用Promise方式异步返回结果。
+abort操作接口,使用Promise方式异步返回结果。
**参数:**
@@ -1057,7 +1048,7 @@ huks.abort(handle, options, function (err, data){});
| -------- | ---------------------- | ---- | ------------------------------------- |
| handle | number | 是 | Abort操作的handle。 **系统能力**:SystemCapability.Security.Huks |
| options | [HuksOptions](#huksoptions) | 是 | Abort操作的参数集合。 **系统能力**:SystemCapability.Security.Huks |
-| promise | Promise\<[HuksResult](#HuksResult)> | 是 | 将Abort操作的结果添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
+| promise | Promise\<[HuksResult](#huksresult)> | 是 | 将Abort操作的结果添加到密钥管理系统的回调。 **系统能力**:SystemCapability.Security.Huks |
**示例:**
@@ -1083,34 +1074,28 @@ var options = {
var result = huks.abort(handle, options);
```
-## huks.HuksParam
+## HuksParam
调用接口使用的options中的properties数组中的param。
-**参数:**
-
| 参数名 | 类型 | 必填 | 说明 |
| ------ | ----------------------------------- | ---- | ----------------------------------------------------------- |
| tag | HuksTag | 是 | 标签 **系统能力**:SystemCapability.Security.Huks |
| value | boolean\|number\|bigint\|Uint8Array | 是 | 标签对应值 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksOptions
+## HuksOptions
调用接口使用的options。
-**参数:**
-
-| 参数名 | 类型 | 必填 | 说明 |
-| ---------- | ---------------- | ---- | ------------------------------------------------------------ |
-| properties | Array | 否 | 属性,存HuksParam的数组。 **系统能力**:SystemCapability.Security.Huks |
-| inData | Uint8Array | 否 | 输入数据。 **系统能力**:SystemCapability.Security.Huks |
+| 参数名 | 类型 | 必填 | 说明 |
+| ---------- | ----------------- | ---- | ------------------------------------------------------------ |
+| properties | Array\ | 否 | 属性,存HuksParam的数组。 **系统能力**:SystemCapability.Security.Huks |
+| inData | Uint8Array | 否 | 输入数据。 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksHandle
+## HuksHandle
huks Handle结构体。
-**参数:**
-
| 参数名 | 类型 | 必填 | 说明 |
| ---------- | ---------------- | ---- | -------- |
| errorCode | number | 是 | 错误码 **系统能力**:SystemCapability.Security.Huks |
@@ -1118,16 +1103,14 @@ huks Handle结构体。
| token | Uint8Array | 否 | 预留字段 **系统能力**:SystemCapability.Security.Huks |
-## huks.HuksResult
+## HuksResult
调用接口返回的result。
-**参数:**
-
-| 参数名 | 类型 | 必填 | 说明 |
-| ---------- | ---------------- | ---- | --------------------------------------------------------- |
-| errorCode | number | 是 | 错误码 **系统能力**:SystemCapability.Security.Huks |
-| outData | Uint8Array | 否 | 输出数据 **系统能力**:SystemCapability.Security.Huks |
-| properties | Array | 否 | 属性 **系统能力**:SystemCapability.Security.Huks |
-| certChains | Array | 否 | 证书链 **系统能力**:SystemCapability.Security.Huks |
+| 参数名 | 类型 | 必填 | 说明 |
+| ---------- | ----------------- | ---- | --------------------------------------------------------- |
+| errorCode | number | 是 | 错误码 **系统能力**:SystemCapability.Security.Huks |
+| outData | Uint8Array | 否 | 输出数据 **系统能力**:SystemCapability.Security.Huks |
+| properties | Array\ | 否 | 属性 **系统能力**:SystemCapability.Security.Huks |
+| certChains | Array\ | 否 | 证书链 **系统能力**:SystemCapability.Security.Huks |
diff --git a/zh-cn/application-dev/reference/apis/js-apis-image.md b/zh-cn/application-dev/reference/apis/js-apis-image.md
index a7b70555bf870d033d06b551631ebb737257fd7b..6795829a272ad08c3d072ed2db9dd6b4c2ca9c87 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-image.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-image.md
@@ -8,21 +8,8 @@
import image from './@ohos.multimedia.image';
```
-
-## PixelMap
-图像像素类,用于读取或写入图像数据以及获取图像信息。在调用PixelMap的方法前,需要先通过createPixelMap创建一个PixelMap实例。
-
- **属性**
-
-| 名称 | 类型 | 可读 | 可写 | 说明 |
-| ---------- | ------- | ---- | ---- | ------------------------------------------------------------ |
-| isEditable | boolean | 是 | 否 | 设定是否图像像素可被编辑。 **系统能力:** SystemCapability.Multimedia.Image |
-
-## PixelMap.createPixelMap
-
-```
-createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions): Promise
-```
+## image.createPixelMap
+createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions): Promise\
通过colors和opts创建pixelmap。
@@ -37,9 +24,9 @@ createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions): Promise | 返回pixelmap。 |
+| 类型 | 说明 |
+| ------------------ | -------------- |
+| Promise\ | 返回pixelmap。 |
**示例:**
@@ -51,11 +38,9 @@ image.createPixelMap(Color, opts)
})
```
-## PixelMap.createPixelMap
+## image.createPixelMap
-```
-createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions) callback: AsyncCallback): void
-```
+createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions) callback: AsyncCallback\): void
通过属性创建pixelmap。
@@ -67,13 +52,7 @@ createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions) callback: Async
| -------- | ----------------------------------------------- | ---- | -------------------- |
| colors | ArrayBuffer | 是 | 颜色数组。 |
| opts | [InitializetionOptions](#InitializationOptions) | 是 | 属性。 |
-| callback | AsyncCallback | 是 | 回调表示成功或失败。 |
-
-**返回值:**
-
-| 类型 | 说明 |
-| ---- | -------------- |
-| void | callback返回空 |
+| callback | AsyncCallback\ | 是 | 回调表示成功或失败。 |
**示例:**
@@ -84,7 +63,17 @@ image.createPixelMap(Color, opts, (pixelmap) => {
})
```
-## PixelMap.readPixelsToBuffer
+## PixelMap
+
+图像像素类,用于读取或写入图像数据以及获取图像信息。在调用PixelMap的方法前,需要先通过createPixelMap创建一个PixelMap实例。
+
+ ### 属性
+
+| 名称 | 类型 | 可读 | 可写 | 说明 |
+| ---------- | ------- | ---- | ---- | ------------------------------------------------------------ |
+| isEditable | boolean | 是 | 否 | 设定是否图像像素可被编辑。 **系统能力:** SystemCapability.Multimedia.Image |
+
+### readPixelsToBuffer
```
readPixelsToBuffer(dst: ArrayBuffer): Promise
@@ -102,9 +91,9 @@ readPixelsToBuffer(dst: ArrayBuffer): Promise
**返回值:**
-| 类型 | 说明 |
-| :------------ | :---------------------------------------------- |
-| Promise | Promise实例,用于获取结果,失败时返回错误信息。 |
+| 类型 | 说明 |
+| :------------- | :---------------------------------------------- |
+| Promise\ | Promise实例,用于获取结果,失败时返回错误信息。 |
**示例:**
@@ -131,11 +120,9 @@ pixelmap.readPixelsToBuffer(readBuffer).then(() => {
})
```
-## PixelMap.readPixelsToBuffer
+### readPixelsToBuffer
-```
-readPixelsToBuffer(dst: ArrayBuffer, callback: AsyncCallback): void
-```
+readPixelsToBuffer(dst: ArrayBuffer, callback: AsyncCallback\): void
读取图像像素数据,结果写入ArrayBuffer里,使用callback形式返回。
@@ -143,10 +130,10 @@ readPixelsToBuffer(dst: ArrayBuffer, callback: AsyncCallback): void
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| -------- | ------------------- | ---- | ------------------------------------------------------------ |
-| dst | ArrayBuffer | 是 | 缓冲区,函数执行结束后获取的图像像素数据写入到该内存区域内。 |
-| callback | AsyncCallback | 是 | 获取回调,失败时返回错误信息。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------------------- | ---- | ------------------------------------------------------------ |
+| dst | ArrayBuffer | 是 | 缓冲区,函数执行结束后获取的图像像素数据写入到该内存区域内。 |
+| callback | AsyncCallback\ | 是 | 获取回调,失败时返回错误信息。 |
**示例:**
@@ -173,11 +160,9 @@ pixelmap.readPixelsToBuffer(readBuffer, () => {
})
```
-## PixelMap.readPixels
+### readPixels
-```
-readPixels(area: PositionArea): Promise
-```
+readPixels(area: PositionArea): Promise\
读取区域内的图片数据,使用Promise形式返回读取结果。
@@ -191,9 +176,9 @@ readPixels(area: PositionArea): Promise
**返回值:**
-| 类型 | 说明 |
-| :------------ | :-------------------------------------------------- |
-| Promise | Promise实例,用于获取读取结果,失败时返回错误信息。 |
+| 类型 | 说明 |
+| :------------- | :-------------------------------------------------- |
+| Promise\ | Promise实例,用于获取读取结果,失败时返回错误信息。 |
**示例:**
@@ -223,11 +208,9 @@ pixelmap.readPixels(area).then((data) => {
})
```
-## PixelMap.readPixels
+### readPixels
-```
-readPixels(area: PositionArea, callback: AsyncCallback): void
-```
+readPixels(area: PositionArea, callback: AsyncCallback\): void
读区域的像素。
@@ -238,7 +221,7 @@ readPixels(area: PositionArea, callback: AsyncCallback): void
| 参数名 | 类型 | 必填 | 说明 |
| -------- | ----------------------------- | ---- | ------------------------------ |
| area | [PositionArea](#PositionArea) | 是 | 区域大小,根据区域读取。 |
-| callback | AsyncCallback | 是 | 获取回调,失败时返回错误信息。 |
+| callback | AsyncCallback\ | 是 | 获取回调,失败时返回错误信息。 |
**示例:**
@@ -261,11 +244,9 @@ pixelmap.readPixels(area,(data) => {
}
```
-## PixelMap.writePixels
+### writePixels
-```
-writePixels(area: PositionArea): Promise
-```
+writePixels(area: PositionArea): Promise\
先创建pixelmap,将pixelmap写入指定区域内,使用Promise形式返回写入结果。
@@ -279,9 +260,9 @@ writePixels(area: PositionArea): Promise
**返回值:**
-| 类型 | 说明 |
-| :------------ | :-------------------------------------------------- |
-| Promise | Promise实例,用于获取写入结果,失败时返回错误信息。 |
+| 类型 | 说明 |
+| :------------- | :-------------------------------------------------- |
+| Promise\ | Promise实例,用于获取写入结果,失败时返回错误信息。 |
**示例:**
@@ -293,11 +274,9 @@ pixelMap.writePixels(area).then(() => {
});
```
-## PixelMap.writePixels
+### writePixels
-```
-writePixels(area: PositionArea, callback: AsyncCallback): void
-```
+writePixels(area: PositionArea, callback: AsyncCallback\): void
将指定的像素信息写入指定区域内。
@@ -308,7 +287,7 @@ writePixels(area: PositionArea, callback: AsyncCallback): void
| 参数名 | 类型 | 必填 | 说明 |
| --------- | ----------------------------- | ---- | ------------------------------ |
| area | [PositionArea](#PositionArea) | 是 | 区域,根据区域写入。 |
-| callback: | AsyncCallback | 是 | 获取回调,失败时返回错误信息。 |
+| callback: | AsyncCallback\ | 是 | 获取回调,失败时返回错误信息。 |
**示例:**
@@ -323,11 +302,9 @@ pixelmap.writePixels(area, () => {
})
```
-## PixelMap.writeBufferToPixels
+### writeBufferToPixels
-```
-writeBufferToPixels(src: ArrayBuffer): Promise
-```
+writeBufferToPixels(src: ArrayBuffer): Promise\
将缓冲区的内容写入像素。
@@ -341,9 +318,9 @@ writeBufferToPixels(src: ArrayBuffer): Promise
**返回值:**
-| 类型 | 说明 |
-| ------------- | ----------------------------------------------- |
-| Promise | Promise实例,用于获取结果,失败时返回错误信息。 |
+| 类型 | 说明 |
+| -------------- | ----------------------------------------------- |
+| Promise\ | Promise实例,用于获取结果,失败时返回错误信息。 |
**示例:**
@@ -355,11 +332,9 @@ pixelMap.writeBufferToPixels(colorBuffer).then(() => {
});
```
-## PixelMap.writeBufferToPixels
+### writeBufferToPixels
-```
-writeBufferToPixels(src: ArrayBuffer, callback: AsyncCallback): void
-```
+writeBufferToPixels(src: ArrayBuffer, callback: AsyncCallback\): void
将缓冲区的内容写入像素。
@@ -367,10 +342,10 @@ writeBufferToPixels(src: ArrayBuffer, callback: AsyncCallback): void
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| -------- | ------------------- | ---- | ------------------------------ |
-| src | ArrayBuffer | 是 | 图像像素数据。 |
-| callback | AsyncCallback | 是 | 获取回调,失败时返回错误信息。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------------------- | ---- | ------------------------------ |
+| src | ArrayBuffer | 是 | 图像像素数据。 |
+| callback | AsyncCallback\ | 是 | 获取回调,失败时返回错误信息。 |
**示例:**
@@ -384,11 +359,9 @@ pixelMap.writeBufferToPixels(colorBuffer, function(err) {
});
```
-## PixelMap.getImageInfo
+### getImageInfo
-```
-getImageInfo(): Promise
-```
+getImageInfo(): Promise\
获取图像像素信息,使用Promise形式返回获取的图像像素信息。
@@ -396,9 +369,9 @@ getImageInfo(): Promise
**返回值:**
-| 类型 | 说明 |
-| ------------------ | ----------------------------------------------------------- |
-| Promise | Promise实例,用于异步获取图像像素信息,失败时返回错误信息。 |
+| 类型 | 说明 |
+| ------------------- | ----------------------------------------------------------- |
+| Promise\ | Promise实例,用于异步获取图像像素信息,失败时返回错误信息。 |
**示例:**
@@ -410,11 +383,9 @@ pixelMap.getImageInfo().then(function(info) {
});
```
-## PixelMap.getImageInfo
+### getImageInfo
-```
-getImageInfo(callback: AsyncCallback): void
-```
+getImageInfo(callback: AsyncCallback\): void
获取图像像素信息,使用callback形式返回获取的图像像素信息。
@@ -422,9 +393,9 @@ getImageInfo(callback: AsyncCallback): void
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| -------- | ------------------- | ---- | ------------------------------------------------------------ |
-| callback | AsyncCallback | 是 | 获取图像像素信息回调,异步返回图像像素信息,失败时返回错误信息。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | ------------------------- | ---- | ------------------------------------------------------------ |
+| callback | AsyncCallback\ | 是 | 获取图像像素信息回调,异步返回图像像素信息,失败时返回错误信息。 |
**示例:**
@@ -444,11 +415,9 @@ pixelmap.getImageInfo((imageInfo) => {
})
```
-## PixelMap.getBytesNumberPerRow
+### getBytesNumberPerRow
-```
-getBytesNumberPerRow(): Promise
-```
+getBytesNumberPerRow(): Promise\
获取图像像素每行字节数。
@@ -456,9 +425,9 @@ getBytesNumberPerRow(): Promise
**返回值:**
-| 类型 | 说明 |
-| ------ | -------------------- |
-| number | 图像像素的行字节数。 |
+| 类型 | 说明 |
+| ---------------- | --------------------------------------------- |
+| Promise\ | Promise实例,用于异步获取图像像素的行字节数。 |
**示例:**
@@ -470,11 +439,9 @@ pixelmap.getBytesNumberPerRow().then((num) => {
})
```
-## PixelMap.getBytesNumberPerRow
+### getBytesNumberPerRow
-```
-getBytesNumberPerRow(callback: AsyncCallback): void
-```
+getBytesNumberPerRow(callback: AsyncCallback\): void
获取图像像素每行字节数。
@@ -482,9 +449,9 @@ getBytesNumberPerRow(callback: AsyncCallback): void
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| -------- | --------------------- | ---- | -------------------- |
-| callback | AsyncCallback | 是 | 回调表示成功或失败。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | ---------------------- | ---- | ------------------ |
+| callback | AsyncCallback\ | 是 | 通过回调返回结果。 |
**示例:**
@@ -496,11 +463,9 @@ pixelmap.getBytesNumberPerRow( num => {
})
```
-## PixelMap.getPixelBytesNumber
+### getPixelBytesNumber
-```
-getPixelBytesNumber(): Promise
-```
+getPixelBytesNumber(): Promise\
获取图像像素的总字节数。
@@ -508,9 +473,9 @@ getPixelBytesNumber(): Promise
**返回值:**
-| 类型 | 说明 |
-| ------ | -------------------- |
-| number | 图像像素的总字节数。 |
+| 类型 | 说明 |
+| ---------------- | --------------------------------------------- |
+| Promise\ | Promise实例,用于异步获取图像像素的总字节数。 |
**示例:**
@@ -522,11 +487,9 @@ pixelmap.getPixelBytesNumber().then((num) => {
})
```
-## PixelMap.getPixelBytesNumber
+### getPixelBytesNumber
-```
-getPixelBytesNumber(callback: AsyncCallback): void
-```
+getPixelBytesNumber(callback: AsyncCallback\): void
获取图像像素的总字节数。
@@ -534,9 +497,9 @@ getPixelBytesNumber(callback: AsyncCallback): void
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| -------- | --------------------- | ---- | -------------------- |
-| callback | AsyncCallback | 是 | 回调表示成功或失败。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | ---------------------- | ---- | ------------------ |
+| callback | AsyncCallback\ | 是 | 通过回调返回结果。 |
**示例:**
@@ -548,11 +511,9 @@ pixelmap.getPixelBytesNumber((num) => {
})
```
-## PixelMap.release
+### release
-```
-release(): void;
-```
+release(): void
释放pixelmap对象,使用Promise形式返回释放结果。
@@ -566,21 +527,9 @@ pixelmap.release()
done()
```
-## [ImageSource](#ImageSource)
-
-图片源类,用于获取图片相关信息。在调用ImageSource的方法前,需要先通过createImageSource构建一个ImageSource实例。
-
-**属性**
-
-| 名称 | 类型 | 可读 | 可写 | 说明 |
-| ---------------- | ------------- | ---- | ---- | ------------------------------------------------------------ |
-| supportedFormats | Array | 是 | 否 | 支持的图片格式,包括:png,jpeg,wbmp,bmp,gif,webp,heif等。 **系统能力:** SystemCapability.Multimedia.Image |
-
-## ImageSource.createImageSource
+## image.createImageSource
-```
createImageSource(uri: string): ImageSource
-```
创建图片源。
@@ -588,15 +537,15 @@ createImageSource(uri: string): ImageSource
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| ------ | ------ | ---- | -------- |
-| uri | string | 是 | 图片路径 |
+| 参数名 | 类型 | 必填 | 说明 |
+| ------ | ------ | ---- | ---------- |
+| uri | string | 是 | 图片路径。 |
**返回值:**
-| 类型 | 说明 |
-| ----------- | ---------- |
-| ImageSource | 返回图片源 |
+| 类型 | 说明 |
+| ----------- | ------------ |
+| ImageSource | 返回图片源。 |
**示例:**
@@ -604,11 +553,9 @@ createImageSource(uri: string): ImageSource
const imageSourceApi = image.createImageSource('/data/local/tmp/test.jpg')
```
-## ImageSource.createImageSource
+## image.createImageSource
-```
createImageSource(fd: number): ImageSource
-```
创建图片源。
@@ -632,11 +579,9 @@ createImageSource(fd: number): ImageSource
const imageSourceApi = image.createImageSource(0)
```
-## ImageSource.createImageSource
+## image.createImageSource
-```
createImageSource(data: ArrayBuffer): ImageSource
-```
创建图片源。
@@ -661,11 +606,9 @@ const data = new ArrayBuffer(96);
const imageSourceApi = image.createImageSource(data);
```
-## ImageSource.createIncrementalSource
+## image.createIncrementalSource
-```
createIncrementalSource(data: ArrayBuffer): ImageSource
-```
创建增量图片源。
@@ -690,11 +633,19 @@ const data = new ArrayBuffer(96);
const imageSourceApi = image.createIncrementalSource(data);
```
-## ImageSource.getImageInfo
+## ImageSource
-```
-getImageInfo(index: number, callback: AsyncCallback): void
-```
+图片源类,用于获取图片相关信息。在调用ImageSource的方法前,需要先通过createImageSource构建一个ImageSource实例。
+
+### 属性
+
+| 名称 | 类型 | 可读 | 可写 | 说明 |
+| ---------------- | -------------- | ---- | ---- | ------------------------------------------------------------ |
+| supportedFormats | Array\ | 是 | 否 | 支持的图片格式,包括:png,jpeg,wbmp,bmp,gif,webp,heif等。 **系统能力:** SystemCapability.Multimedia.Image |
+
+### getImageInfo
+
+getImageInfo(index: number, callback: AsyncCallback\): void
获取指定序号的图片信息,使用callback形式返回图片信息。
@@ -726,11 +677,9 @@ it('TC_046', 0, async function (done) {
})
```
-## ImageSource.getImageInfo
+### getImageInfo
-```
-getImageInfo(callback: AsyncCallback): void
-```
+getImageInfo(callback: AsyncCallback\): void
获取指定序号的图片信息,使用callback形式返回图片信息。
@@ -752,11 +701,9 @@ imageSourceApi.getImageInfo(imageInfo => {
})
```
-## ImageSource.getImageInfo
+### getImageInfo
-```
-getImageInfo(index?: number): Promise
-```
+getImageInfo(index?: number): Promise\
获取图片信息,使用Promise形式返回图片信息。
@@ -770,9 +717,9 @@ getImageInfo(index?: number): Promise
**返回值:**
-| 类型 | 说明 |
-| ----------------------- | ---------------------- |
-| [ImageInfo](#ImageInfo) | 返回获取到的图片信息。 |
+| 类型 | 说明 |
+| --------------------------------- | ---------------------- |
+| Promise\<[ImageInfo](#ImageInfo)> | 返回获取到的图片信息。 |
**示例:**
@@ -785,11 +732,9 @@ imageSourceApi.getImageInfo(0)
})
```
-## ImageSource.getImageProperty
+### getImageProperty
-```
-getImageProperty(key:string, options?: GetImagePropertyOptions): Promise
-```
+getImageProperty(key:string, options?: GetImagePropertyOptions): Promise\
获取图片中给定索引处图像的指定属性键的值。
@@ -804,9 +749,9 @@ getImageProperty(key:string, options?: GetImagePropertyOptions): Promise
**返回值:**
-| 类型 | 说明 |
-| --------------- | ------------------------------------------------------------ |
-| Promise | Promise实例,用于异步获取图片属性值,如获取失败则返回属性默认值。 |
+| 类型 | 说明 |
+| ---------------- | ------------------------------------------------------------ |
+| Promise\ | Promise实例,用于异步获取图片属性值,如获取失败则返回属性默认值。 |
**示例:**
@@ -814,11 +759,9 @@ getImageProperty(key:string, options?: GetImagePropertyOptions): Promise
const w = imageSourceApi.getImageProperty("ImageWidth")
```
-## ImageSource.getImageProperty
+### getImageProperty
-```
- getImageProperty(key:string, callback: AsyncCallback): void
-```
+getImageProperty(key:string, callback: AsyncCallback\): void
获取图片中给定索引处图像的指定属性键的值,使用callback形式返回结果。
@@ -826,10 +769,10 @@ const w = imageSourceApi.getImageProperty("ImageWidth")
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| -------- | --------------------- | ---- | ------------------------------------------------------------ |
-| key | string | 是 | 图片属性名。 |
-| callback | AsyncCallback | 是 | 获取图片属性回调,返回图片属性值,如获取失败则返回属性默认值。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | ---------------------- | ---- | ------------------------------------------------------------ |
+| key | string | 是 | 图片属性名。 |
+| callback | AsyncCallback\ | 是 | 获取图片属性回调,返回图片属性值,如获取失败则返回属性默认值。 |
**示例:**
@@ -837,11 +780,9 @@ const w = imageSourceApi.getImageProperty("ImageWidth")
const w = imageSourceApi.getImageProperty("ImageWidth",w=>{})
```
-## ImageSource.getImageProperty
+### getImageProperty
-```
-getImageProperty(key:string, options: GetImagePropertyOptions, callback: AsyncCallback): void
-```
+getImageProperty(key:string, options: GetImagePropertyOptions, callback: AsyncCallback\): void
获取图片指定属性键的值,callback形式返回结果。
@@ -849,16 +790,11 @@ getImageProperty(key:string, options: GetImagePropertyOptions, callback: AsyncCa
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| ------- | --------------------------------------------------- | ---- | ------------------------------------ |
-| key | string | 是 | 图片属性名。 |
-| options | [GetImagePropertyOptions](#GetImagePropertyOptions) | 是 | 图片属性,包括图片序号与默认属性值。 |
-
-**返回值:**
-
-| 类型 | 说明 |
-| ------ | -------------------- |
-| string | 返回string类型的值。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | --------------------------------------------------- | ---- | ------------------------------------------------------------ |
+| key | string | 是 | 图片属性名。 |
+| options | [GetImagePropertyOptions](#GetImagePropertyOptions) | 是 | 图片属性,包括图片序号与默认属性值。 |
+| callback | AsyncCallback\ | 是 | 获取图片属性回调,返回图片属性值,如获取失败则返回属性默认值。 |
**示例:**
@@ -866,11 +802,9 @@ getImageProperty(key:string, options: GetImagePropertyOptions, callback: AsyncCa
imageSourceApi.getImageProperty("ImageWidth",PropertyOptions,(w)=>{})
```
-## ImageSource.modifyImageProperty
+### modifyImageProperty
-```
-modifyImageProperty(key:string, value:string, options?: GetImagePropertyOptions): Promise
-```
+modifyImageProperty(key:string, value:string, options?: GetImagePropertyOptions): Promise\
修改属性的值。
@@ -884,6 +818,14 @@ modifyImageProperty(key:string, value:string, options?: GetImagePropertyOptions)
| value | string | 是 | 属性值。 |
| options | [GetImagePropertyOptions](#GetImagePropertyOptions) | 是 | 图片属性,包括图片序号与默认属性值。 |
+**返回值:**
+
+| 类型 | 说明 |
+| -------------- | --------------------------- |
+| Promise\ | Promise实例,异步返回结果。 |
+
+**示例:**
+
**示例:**
```js
@@ -896,11 +838,9 @@ imageSourceApi.modifyImageProperty("ImageWidth", "abc")
})
```
-## ImageSource.modifyImageProperty
+### modifyImageProperty
-```
-modifyImageProperty(key:string, value:string, callback: AsyncCallback): void
-```
+modifyImageProperty(key:string, value:string, callback: AsyncCallback\): void
修改属性的值,callback返回结果。
@@ -908,11 +848,11 @@ modifyImageProperty(key:string, value:string, callback: AsyncCallback): vo
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| -------- | ------------------- | ---- | ------------------------------ |
-| key | string | 是 | 图片属性名。 |
-| value | string | 是 | 属性值。 |
-| callback | AsyncCallback | 是 | 修改属性值,callback返回结果。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------------------- | ---- | ------------------------------ |
+| key | string | 是 | 图片属性名。 |
+| value | string | 是 | 属性值。 |
+| callback | AsyncCallback\ | 是 | 修改属性值,callback返回结果。 |
**示例:**
@@ -920,11 +860,9 @@ modifyImageProperty(key:string, value:string, callback: AsyncCallback): vo
imageSourceApi.modifyImageProperty("ImageWidth", "abc",() => {})
```
-## ImageSource.modifyImageProperty
+### modifyImageProperty
-```
-modifyImageProperty(key:string, value:string, options: GetImagePropertyOptions,callback: AsyncCallback): void
-```
+modifyImageProperty(key:string, value:string, options: GetImagePropertyOptions,callback: AsyncCallback\): void
修改属性的值,callback返回结果。
@@ -937,7 +875,7 @@ modifyImageProperty(key:string, value:string, options: GetImagePropertyOptions,c
| key | string | 是 | 图片属性名。 |
| value | string | 是 | 属性值。 |
| options | [GetImagePropertyOptions](#GetImagePropertyOptions) | 是 | 图片属性,包括图片序号与默认属性值。 |
-| callback | AsyncCallback | 是 | 修改属性值,callback返回结果。 |
+| callback | AsyncCallback\ | 是 | 修改属性值,callback返回结果。 |
**示例:**
@@ -950,11 +888,9 @@ imageSourceApi.modifyImageProperty("ImageWidth", "abc",PropertyOptions,() => {
};
```
-## ImageSource.createPixelMap
+### createPixelMap
-```
-createPixelMap(index: number, options: DecodingOptions, callback: AsyncCallback): void
-```
+createPixelMap(index: number, options: DecodingOptions, callback: AsyncCallback\): void
通过图片解码参数创建pixelmap对象,使用callback形式返回结果。
@@ -978,11 +914,9 @@ imageSourceApi.createPixelMap().then(pixelmap => {
})
```
-## ImageSource.createPixelMap
+### createPixelMap
-```
-createPixelMap(options: DecodingOptions, callback: AsyncCallback): void
-```
+createPixelMap(options: DecodingOptions, callback: AsyncCallback\): void
通过图片解码参数创建pixelmap对象。
@@ -1013,11 +947,9 @@ let decodingOptions = {
})
```
-## ImageSource.createPixelMap
+### createPixelMap
-```
-createPixelMap(opts: DecodingOptions, callback: AsyncCallback): void
-```
+createPixelMap(opts: DecodingOptions, callback: AsyncCallback\): void
通过图片解码参数创建pixelmap对象。
@@ -1049,11 +981,9 @@ let decodingOptions = {
})
```
-## ImageSource.updateData
+### updateData
-```
-updateData(data: Array, isFinal: boolean, offset: number, length: number, callback: AsyncCallback): void
-```
+updateData(data: Array\, isFinal: boolean, offset: number, length: number, callback: AsyncCallback\): void
更新增量数据。
@@ -1061,13 +991,13 @@ updateData(data: Array, isFinal: boolean, offset: number, length: number
**参数:**
-| 名称 | 类型 | 必填 | 说明 |
-| -------- | ---------------------- | ---- | -------------------- |
-| data | Array | 是 | 增量数据。 |
-| isFinal | boolean | 是 | 是否更新完。 |
-| offset | number | 是 | 偏移量。 |
-| length | number | 是 | 数组长。 |
-| callback | AsyncCallback | 是 | 回调表示成功或失败。 |
+| 名称 | 类型 | 必填 | 说明 |
+| -------- | ----------------------- | ---- | -------------------- |
+| data | Array\ | 是 | 增量数据。 |
+| isFinal | boolean | 是 | 是否更新完。 |
+| offset | number | 是 | 偏移量。 |
+| length | number | 是 | 数组长。 |
+| callback | AsyncCallback\ | 是 | 回调表示成功或失败。 |
**示例:**
@@ -1080,11 +1010,9 @@ imageSourceIncrementalSApi.updateData(array, false, 0, 10,(error,data )=> {
}
```
-## ImageSource.updateData
+### updateData
-```
-updateData(data: Array, isFinal: boolean, offset?: number, length?: number): Promise
-```
+updateData(data: Array\, isFinal: boolean, offset?: number, length?: number): Promise\
更新增量数据。
@@ -1092,12 +1020,18 @@ updateData(data: Array, isFinal: boolean, offset?: number, length?: numb
**参数:**
-| 名称 | 类型 | 必填 | 说明 |
-| ------- | ------------- | ---- | ------------ |
-| data | Array | 是 | 增量数据。 |
-| isFinal | boolean | 是 | 是否更新完。 |
-| offset | boolean | 否 | 偏移量。 |
-| length | number | 否 | 数组长。 |
+| 名称 | 类型 | 必填 | 说明 |
+| ------- | -------------- | ---- | ------------ |
+| data | Array\ | 是 | 增量数据。 |
+| isFinal | boolean | 是 | 是否更新完。 |
+| offset | boolean | 否 | 偏移量。 |
+| length | number | 否 | 数组长。 |
+
+**返回值:**
+
+| 类型 | 说明 |
+| ----------------- | --------------------------------- |
+| Promise\ | Promise实例,异步返回成功或失败。 |
**示例:**
@@ -1109,11 +1043,9 @@ updateData(data: Array, isFinal: boolean, offset?: number, length?: numb
})
```
-## ImageSource.updateData
+### updateData
-```
-updateData(data: Array, isFinal: boolean, callback: AsyncCallback): void
-```
+updateData(data: Array\, isFinal: boolean, callback: AsyncCallback\): void
更新增量数据。
@@ -1121,11 +1053,11 @@ updateData(data: Array, isFinal: boolean, callback: AsyncCallback | 是 | 增量数据。 |
-| isFinal | boolean | 是 | 是否更新完。 |
-| callback | AsyncCallback | 是 | 回调表示成功或失败。 |
+| 名称 | 类型 | 必填 | 说明 |
+| -------- | ----------------------- | ---- | -------------------- |
+| data | Array\ | 是 | 增量数据。 |
+| isFinal | boolean | 是 | 是否更新完。 |
+| callback | AsyncCallback\ | 是 | 回调表示成功或失败。 |
**示例:**
@@ -1138,11 +1070,9 @@ imageSourceIncrementalSApi.updateData(array, false,(error,data) => {
}
```
-## ImageSource.release
+### release
-```
-release(callback: AsyncCallback): void
-```
+release(callback: AsyncCallback\): void
释放图片源。
@@ -1150,9 +1080,9 @@ release(callback: AsyncCallback): void
**参数:**
-| 名称 | 类型 | 必填 | 说明 |
-| -------- | ------------------- | ---- | ---------------------------------- |
-| callback | AsyncCallback | 是 | 资源释放回调,失败时返回错误信息。 |
+| 名称 | 类型 | 必填 | 说明 |
+| -------- | -------------------- | ---- | ---------------------------------- |
+| callback | AsyncCallback\ | 是 | 资源释放回调,失败时返回错误信息。 |
**示例:**
@@ -1165,16 +1095,20 @@ imageSourceApi.release(() => {
}
```
-## ImageSource.release
+### release
-```
-release(): Promise
-```
+release(): Promise\
释放图片源。
**系统能力:** SystemCapability.Multimedia.Image
+**返回值:**
+
+| 类型 | 说明 |
+| -------------- | --------------------------- |
+| Promise\ | Promise实例,异步返回结果。 |
+
**示例:**
```js
@@ -1185,21 +1119,9 @@ release(): Promise
})
```
-## ImagePacker
-
-图片打包器类,用于图片压缩和打包。在调用ImagePacker的方法前,需要先通过createImagePacker构建一个ImagePacker实例。
-
-**属性**
+## image.createImagePacker
-| 名称 | 类型 | 可读 | 可写 | 说明 |
-| ---------------- | ------------- | ---- | ---- | ------------------------------------------------------------ |
-| supportedFormats | Array | 是 | 否 | 图片打包支持的格式,jpg。 **系统能力:** SystemCapability.Multimedia.Image |
-
-## ImagePacker.createImagePacker
-
-```
createImagePacker(): ImagePacker
-```
创建imagepacker实例。
@@ -1217,11 +1139,19 @@ createImagePacker(): ImagePacker
const imagePackerApi = image.createImagePacker();
```
-## ImagePacker.packing
+## ImagePacker
+
+图片打包器类,用于图片压缩和打包。在调用ImagePacker的方法前,需要先通过createImagePacker构建一个ImagePacker实例。
-```
-packing(source: ImageSource, option: PackingOption, callback: AsyncCallback>): void
-```
+### 属性
+
+| 名称 | 类型 | 可读 | 可写 | 说明 |
+| ---------------- | -------------- | ---- | ---- | ------------------------------------------------------------ |
+| supportedFormats | Array\ | 是 | 否 | 图片打包支持的格式,jpg。 **系统能力:** SystemCapability.Multimedia.Image |
+
+### packing
+
+packing(source: ImageSource, option: PackingOption, callback: AsyncCallback>): void
图片压缩或重新打包,使用callback形式返回结果。
@@ -1233,7 +1163,7 @@ packing(source: ImageSource, option: PackingOption, callback: AsyncCallback> | 是 | 获取图片打包回调,返回打包后数据。 |
+| callback | AsyncCallback> | 是 | 获取图片打包回调,返回打包后数据。 |
**示例:**
@@ -1246,11 +1176,9 @@ let packOpts = { format:["image/jpeg"], quality:98 }
})
```
-## ImagePacker.packing
+### packing
-```
-packing(source: ImageSource, option: PackingOption): Promise>
-```
+packing(source: ImageSource, option: PackingOption): Promise>
图片压缩或重新打包,使用promise形式返回结果。
@@ -1265,9 +1193,9 @@ packing(source: ImageSource, option: PackingOption): Promise>
**返回值:**
-| 类型 | 说明 |
-| :------------------- | :-------------------------------------------- |
-| Promise | Promise实例,用于异步获取压缩或打包后的数据。 |
+| 类型 | 说明 |
+| :---------------------- | :-------------------------------------------- |
+| Promise> | Promise实例,用于异步获取压缩或打包后的数据。 |
**示例:**
@@ -1281,11 +1209,9 @@ let packOpts = { format:["image/jpeg"], quality:98 }
})
```
-## ImagePacker.release
+### release
-```
-release(callback: AsyncCallback): void
-```
+release(callback: AsyncCallback\): void
释放packer对象。
@@ -1293,9 +1219,9 @@ release(callback: AsyncCallback): void
**参数:**
-| 参数名 | 类型 | 必填 | 说明 |
-| -------- | ------------------- | ---- | ---------------------- |
-| callback | AsyncCallback | 是 | 回调表示成功还是失败。 |
+| 参数名 | 类型 | 必填 | 说明 |
+| -------- | -------------------- | ---- | ---------------------- |
+| callback | AsyncCallback\ | 是 | 回调表示成功还是失败。 |
**示例:**
@@ -1306,16 +1232,20 @@ imagePackerApi.release(()=>{
done();
```
-## ImagePacker.release
+### release
-```
-release(): Promise
-```
+release(): Promise\
释放packer对象。
**系统能力:** SystemCapability.Multimedia.Image
+**返回值:**
+
+| 类型 | 说明 |
+| :------------- | :------------------------------ |
+| Promise\ | Promise实例,用于异步返回结果。 |
+
**示例:**
```js
@@ -1327,8 +1257,6 @@ imagePackerApi.release();
## PositionArea
-**属性:**
-
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------ | ----------------- | ---- | ---- | ------------------------------------------------------------ |
| pixels | ArrayBuffer | 是 | 否 | 像素。 **系统能力:** SystemCapability.Multimedia.Image |
@@ -1338,8 +1266,6 @@ imagePackerApi.release();
## **ImageInfo **
-**属性:**
-
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ----------- | --------------------------------- | ---- | ---- | ------------------------------------------------------------ |
| size | [Size](#Size) | 是 | 是 | 图片大小。 **系统能力:** SystemCapability.Multimedia.Image |
@@ -1349,8 +1275,6 @@ imagePackerApi.release();
## Size
-**属性:**
-
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------ | ------ | ---- | ---- | ------------------------------------------------------------ |
| height | number | 是 | 是 | 输出图片的高。 **系统能力:** SystemCapability.Multimedia.Image |
@@ -1412,8 +1336,6 @@ imagePackerApi.release();
## InitializationOptions
-**属性:**
-
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ----------- | --------------------------------- | ---- | ---- | ------------------------------------------------------------ |
| alphaType | [AlphaType](#AlphaType) | 是 | 是 | 透明度。 **系统能力:** SystemCapability.Multimedia.Image |
@@ -1426,8 +1348,6 @@ imagePackerApi.release();
解码设置选项。
-**属性:**
-
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------------ | --------------------------------- | ---- | ---- | ------------------------------------------------------------ |
| sampleSize | number | 是 | 是 | 缩略图采样大小。 **系统能力:** SystemCapability.Multimedia.Image |
@@ -1440,8 +1360,6 @@ imagePackerApi.release();
## Region
-**属性:**
-
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ---- | ------------- | ---- | ---- | ------------------------------------------------------------ |
| size | [Size](#Size) | 是 | 是 | 区域大小。 **系统能力:** SystemCapability.Multimedia.Image |
@@ -1450,8 +1368,6 @@ imagePackerApi.release();
## PackingOption
-**属性:**
-
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------- | ------ | ---- | ---- | ------------------------------------------------------------ |
| format | string | 是 | 是 | 目标格式。 **系统能力:** SystemCapability.Multimedia.Image |
@@ -1459,12 +1375,8 @@ imagePackerApi.release();
## GetImagePropertyOptions
-**属性:**
-
| 名称 | 类型 | 可读 | 可写 | 说明 |
| ------------ | ------ | ---- | ---- | ---------- |
| index | number | 是 | 是 | 图片序号。 **系统能力:** SystemCapability.Multimedia.Image |
| defaultValue | string | 是 | 是 | 默认属性值 **系统能力:** SystemCapability.Multimedia.Image |
------
-
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png b/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png
deleted file mode 100644
index 0447567e9bbfa6d46d5e61c810263387ba0aa981..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/sidebarcontainer.png and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 8aa097feebec90c33481cc229e004cc7b6b7a14b..83b31626aa2cd63a86b4dbc2c71a8d1322b19c1c 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -1342,20 +1342,16 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
.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.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
this.context.stroke()
})
- Button('back')
- .onClick(() => {
- router.back()
- })
}
.width('100%')
.height('100%')
}
}
```
-
+

@@ -1462,17 +1458,13 @@ clip(): void
this.context.fillStyle = "rgb(255,0,0)"
this.context.fillRect(0, 0, 150, 150)
})
- Button('back')
- .onClick(() => {
- router.back()
- })
}
.width('100%')
.height('100%')
}
}
```
-
+

diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
index 9659dda43e23befba5bafb5f4ad867ac6286167c..1b4ec1c571ecc81f73d76a0f4fcc8832ea6892f2 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-path2d.md
@@ -387,7 +387,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
.height('100%')
.backgroundColor('#ffff00')
.onReady(() =>{
- this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI, true)
+ this.path2Db.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
this.context.stroke(this.path2Db)
})
}
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
index 43dddb82795587b63bef2151ea2b607037066a45..95d3ab05e222f3675b0412969ccab5be988b5352 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
@@ -1424,7 +1424,7 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
.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.ellipse(200, 200, 50, 100, Math.PI * 0.25, Math.PI * 0.5, Math.PI)
this.offContext.stroke()
var image = this.offContext.transferToImageBitmap()
this.context.transferFromImageBitmap(image)
diff --git a/zh-cn/application-dev/security/Readme-CN.md b/zh-cn/application-dev/security/Readme-CN.md
index 043b4a2dcf5075865571e4da884ae34e2cc51771..57303b1522c8b35de1e69bb73abcb5bfc482e56b 100644
--- a/zh-cn/application-dev/security/Readme-CN.md
+++ b/zh-cn/application-dev/security/Readme-CN.md
@@ -3,5 +3,10 @@
- 用户认证
- [用户认证开发概述](userauth-overview.md)
- [用户认证开发指导](userauth-guidelines.md)
+
+- 密钥管理
+ - [HUKS开发概述](huks-overview.md)
+ - [HUKS开发指导](huks-guidelines.md)
+
- Hap包签名工具
- - [Hap包签名工具开发指南](hapsigntool-guidelines.md)
+ - [Hap包签名工具开发指导](hapsigntool-guidelines.md)
diff --git a/zh-cn/application-dev/security/hapsigntool-guidelines.md b/zh-cn/application-dev/security/hapsigntool-guidelines.md
index 264b13dbc1746a7fd09ccb86086e72458da68c71..4fe2c34d3df809abfcd41ae4e47eae61d04bb102 100644
--- a/zh-cn/application-dev/security/hapsigntool-guidelines.md
+++ b/zh-cn/application-dev/security/hapsigntool-guidelines.md
@@ -1,4 +1,4 @@
-# Hap包签名工具开发指南
+# Hap包签名工具开发指导
@@ -13,10 +13,10 @@
Hap包签名工具支持本地签名需求的开发,为OpenHarmony应用提供完整性保护和来源管控机制,该签名工具基于PKI公钥证书的机制实现,在进行开发前,开发者应了解以下基本概念:
- 非对称密钥对
- 非对称密钥算法是数据签名/验签的基础,应用签名工具实现生成标准的非对称密钥对(ECC P384/256、RSA2048/3072/4096,用于证书的签发和验证、Profile文件的签名和验签、以及应用包的签名和验签,提供应用的完整性保护机制。
+ 非对称密钥算法是数据签名/验签的基础,应用签名工具实现生成标准的非对称密钥对(ECC P384/256、RSA2048/3072/4096,用于证书的签发和验证、Profile文件的签名和验签、以及应用包的签名和验签,提供应用的完整性保护机制。
- CSR
- CSR(Certificate Signing Request)证书签发请求是生成证书的前提,他包括证书的公钥、证书主题和私钥签名,在申请证书之前,需要先基于密钥对生成CSR,然后提交给CA签发证书。
+ CSR(Certificate Signing Request)证书签发请求是生成证书的前提,他包括证书的公钥、证书主题和私钥签名,在申请证书之前,需要先基于密钥对生成CSR,然后提交给CA签发证书。
- 证书
OpenHarmony采用RFC5280标准构建X509证书信任体系。用于应用签名的OpenHarmony证书按层级可分为:根CA证书、子CA证书、三级实体证书,其中三级实体证书分为应用签名证书和profile签名证书。应用签名证书表示应用开发者的身份,可保证系统上安装的应用来源可追溯,profile签名证书实现对profile文件的签名进行验签,保证profile文件的完整性。
- HAP包
@@ -33,13 +33,13 @@ hap包中的描述文件,该描述文件描述了已授权的证书权限和
## 编译构建
1. 该工具基于Gradle 7.1编译构建,请确认环境已安装配置Gradle环境,并且版本高于或等于7.1。
-
+
```shell
gradle -v
```
2. 下载代码,命令行打开文件目录至developtools_hapsigner/hapsigntool,执行命令进行编译打包。
-
+
```shell
gradle build
```
@@ -74,7 +74,7 @@ OpenHarmony系统内置密钥库文件,文件名称为OpenHarmony.p12,内含
1.输出命令帮助信息
-help # 输出命令帮助信息(不输入参数默认输出命令帮助信息)
-
+
2.输出版本信息
-version # 输出版本信息
@@ -209,7 +209,7 @@ OpenHarmony系统内置密钥库文件,文件名称为OpenHarmony.p12,内含
├── -outFil # 验证结果文件(包含验证结果和profile内容),json格式,可选项;如果不填,则直接输出到控制台
11.hap应用包签名
-
+
sign-app : hap应用包签名
├── -mode # 签名模式,必填项,包括localSign,remoteSign,remoteResign
├── -keyAlias # 密钥别名,必填项
@@ -247,9 +247,9 @@ OpenHarmony系统内置密钥库文件,文件名称为OpenHarmony.p12,内含
子CA证书所在路径:developtools_hapsigner/autosign/result/subCA.cer;
pfofile签名证书路径:developtools_hapsigner/autosign/result/OpenHarmonyProfileRelease.pem。
-
+
**1.生成应用签名证书密钥对
**
-
+
调用密钥对生成接口,生成签名密钥并保存到密钥库。
命令实例:
@@ -259,7 +259,7 @@ java -jar hap-sign-tool.jar generate-keypair -keyAlias "oh-app1-key-v1" -keyAlg
>  **说明:**请记录下**keyAlias、keyStorePwd**和**keyPwd**的值,在后续[生成应用签名证书](#生成应用签名证书)和[对Hap包进行签名](#对Hap包进行签名)操作会使用到。
该命令的参数说明:
-
+
generate-keypair : 生成应用签名证书密钥对
├── -keyAlias #用于生成应用签名证书的密钥别名,存于OpenHarmony.p12密钥库文件中,该参数必填
├── -keyAlg #密钥算法,推荐使用ECC,该参数必填
@@ -267,7 +267,7 @@ java -jar hap-sign-tool.jar generate-keypair -keyAlias "oh-app1-key-v1" -keyAlg
├── -keyStoreFile #密钥库文件,推荐使用提供的OpenHarmony.p12密钥库文件,该参数必填
├── -keyStorePwd #密钥库口令,OpenHarmony.p12口令默认为“123456”,必填项
├── -keyPwd #密钥口令,可选项,该参数不填默认生成的密钥对无口令
-
+
**2.生成应用签名证书
**
@@ -353,6 +353,7 @@ java -jar hap-sign-tool.jar sign-app -keyAlias "oh-app1-key-v1" -signAlg "SHA256
+
## 常见问题
**1.执行[生成应用签名证书](#生成应用签名证书)命令时,控制台打印结果,无文件输出**
diff --git a/zh-cn/application-dev/security/huks-guidelinest.md b/zh-cn/application-dev/security/huks-guidelines.md
old mode 100755
new mode 100644
similarity index 96%
rename from zh-cn/application-dev/security/huks-guidelinest.md
rename to zh-cn/application-dev/security/huks-guidelines.md
index 25285d08980aba9aeb33a2cd4df63cb0be9a7679..3c9f934168a460e02247938e326b6ee4a927fd27
--- a/zh-cn/application-dev/security/huks-guidelinest.md
+++ b/zh-cn/application-dev/security/huks-guidelines.md
@@ -1,140 +1,140 @@
-# HUKS开发指南
-
-## 场景介绍
-
- HUKS(OpenHarmony Universal KeyStore,OpenHarmony通用密钥库系统)向应用提供密钥库能力,包括密钥管理及密钥的密码学操作等功能。HUKS所管理的密钥可以由应用导入或者由应用调用HUKS接口生成。
-
-
-## 接口说明
-
-| 接口名 | 描述 |
-| ------------------------------------------------------------ | ---------------- |
-| function generateKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void; | 生成密钥/密钥对 |
-| function generateKey(keyAlias: string, options: HuksOptions) : Promise; | 生成密钥/密钥对 |
-| function exportKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void; | 导出公钥 |
-| function exportKey(keyAlias: string, options: HuksOptions) : Promise; | 导出公钥 |
-| function isKeyExist(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void; | 查询密钥是否存在 |
-| function isKeyExist(keyAlias: string, options: HuksOptions) : Promise; | 查询密钥是否存在 |
-| function deleteKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void; | 删除密钥 |
-| function deleteKey(keyAlias: string, options: HuksOptions) : Promise; | 删除密钥 |
-
-## 开发步骤
-
-1. 引入HUKS模块
-
- ```js
- import huks from '@ohos.security.huks'
- ```
-
-2. 使用generateKey接口生成密钥对。
-
- keyAlias为生成的密钥别名,options为生成密钥时使用到的参数,需根据具体需要到的算法设定options中的参数。
-
- generateKey接口会返回密钥的生成是否成功。
-
- ```js
- var alias = 'testAlias';
- var properties = new Array();
- properties[0] = {
- tag: huks.HuksTag.HUKS_TAG_ALGORITHM,
- value: huks.HuksKeyAlg.HUKS_ALG_ECC
- };
- properties[1] = {
- tag: huks.HuksTag.HUKS_TAG_KEY_SIZE,
- value: huks.HuksKeySize.HUKS_ECC_KEY_SIZE_224
- };
- properties[2] = {
- tag: huks.HuksTag.HUKS_TAG_PURPOSE,
- value: huks.HuksKeyPurpose.HUKS_KEY_PURPOSE_AGREE
- };
- properties[3] = {
- tag: huks.HuksTag.HUKS_TAG_DIGEST,
- value: huks.HuksKeyDigest.HUKS_DIGEST_NONE
- };
- var options = {
- properties: properties
- }
- var resultA = await huks.generateKey(alias, options);
- ```
-
-3. 使用Init接口进行init操作。
-
- Alias为初始化密钥的别名,options为初始化密钥用的参数集合,需根据具体需要到的算法设定options中的参数。
-
- init接口会返回init操作是否成功。
-
- ```js
- var alias = 'test001'
- var properties = new Array();
- properties[0] = {
- tag: huks.HuksTag.HUKS_TAG_ALGORITHM,
- value: huks.HksKeyAlg.HKS_ALG_DH
- };
- properties[1] = {
- tag: huks.HksTag.HKS_TAG_PURPOSE,
- value: huks.HksKeyPurpose.HKS_KEY_PURPOSE_AGREE
- };
- properties[2] = {
- tag: huks.HksTag.HKS_TAG_KEY_SIZE
- value: huks.HksKeySize.HKS_DH_KEY_SIZE_4096
- };
- var options = {
- properties: properties
- };
- huks.init(alias, options, function (err, data){});
- ```
-
-4. 使用Update接口进行update操作。
-
- handle为更新密钥的session id,options为更新密钥用的参数集合,需根据具体需要到的算法设定options中的参数。
-
- update接口会返回update操作是否成功。
-
- ```js
- var properties = new Array();
- properties[0] = {
- tag: huks.HuksTag.HUKS_TAG_ALGORITHM,
- value: huks.HksKeyAlg.HKS_ALG_DH
- };
- properties[1] = {
- tag: huks.HksTag.HKS_TAG_PURPOSE,
- value: huks.HksKeyPurpose.HKS_KEY_PURPOSE_AGREE
- };
- properties[2] = {
- tag: huks.HksTag.HKS_TAG_KEY_SIZE
- value: huks.HksKeySize.HKS_DH_KEY_SIZE_4096
- };
- var options = {
- properties: properties
- };
- huks.update(handle, options, function (err, data){});
- ```
-
-5. 使用Finish接口进行finish操作。
-
- handle为 结束密钥的session id,options为结束密钥用的参数集合,需根据具体需要到的算法设定options中的参数。
-
- finish接口会返回finish操作是否成功。
-
- ```js
- var properties = new Array();
- properties[0] = {
- tag: huks.HuksTag.HUKS_TAG_ALGORITHM,
- value: huks.HksKeyAlg.HKS_ALG_DH
- };
- properties[1] = {
- tag: huks.HksTag.HKS_TAG_PURPOSE,
- value: huks.HksKeyPurpose.HKS_KEY_PURPOSE_AGREE
- };
- properties[2] = {
- tag: huks.HksTag.HKS_TAG_KEY_SIZE
- value: huks.HksKeySize.HKS_DH_KEY_SIZE_4096
- };
- var options = {
- properties: properties
- };
- huks.finish(handle, options, function (err, data){});
- ```
-
-
-
+# HUKS开发指导
+
+## 场景介绍
+
+ HUKS(OpenHarmony Universal KeyStore,OpenHarmony通用密钥库系统)向应用提供密钥库能力,包括密钥管理及密钥的密码学操作等功能。HUKS所管理的密钥可以由应用导入或者由应用调用HUKS接口生成。
+
+
+## 接口说明
+
+| 接口名 | 描述 |
+| ------------------------------------------------------------ | ---------------- |
+| function generateKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void; | 生成密钥/密钥对 |
+| function generateKey(keyAlias: string, options: HuksOptions) : Promise; | 生成密钥/密钥对 |
+| function exportKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void; | 导出公钥 |
+| function exportKey(keyAlias: string, options: HuksOptions) : Promise; | 导出公钥 |
+| function isKeyExist(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void; | 查询密钥是否存在 |
+| function isKeyExist(keyAlias: string, options: HuksOptions) : Promise; | 查询密钥是否存在 |
+| function deleteKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback) : void; | 删除密钥 |
+| function deleteKey(keyAlias: string, options: HuksOptions) : Promise; | 删除密钥 |
+
+## 开发步骤
+
+1. 引入HUKS模块
+
+ ```js
+ import huks from '@ohos.security.huks'
+ ```
+
+2. 使用generateKey接口生成密钥对。
+
+ keyAlias为生成的密钥别名,options为生成密钥时使用到的参数,需根据具体需要到的算法设定options中的参数。
+
+ generateKey接口会返回密钥的生成是否成功。
+
+ ```js
+ var alias = 'testAlias';
+ var properties = new Array();
+ properties[0] = {
+ tag: huks.HuksTag.HUKS_TAG_ALGORITHM,
+ value: huks.HuksKeyAlg.HUKS_ALG_ECC
+ };
+ properties[1] = {
+ tag: huks.HuksTag.HUKS_TAG_KEY_SIZE,
+ value: huks.HuksKeySize.HUKS_ECC_KEY_SIZE_224
+ };
+ properties[2] = {
+ tag: huks.HuksTag.HUKS_TAG_PURPOSE,
+ value: huks.HuksKeyPurpose.HUKS_KEY_PURPOSE_AGREE
+ };
+ properties[3] = {
+ tag: huks.HuksTag.HUKS_TAG_DIGEST,
+ value: huks.HuksKeyDigest.HUKS_DIGEST_NONE
+ };
+ var options = {
+ properties: properties
+ }
+ var resultA = await huks.generateKey(alias, options);
+ ```
+
+3. 使用Init接口进行init操作。
+
+ Alias为初始化密钥的别名,options为初始化密钥用的参数集合,需根据具体需要到的算法设定options中的参数。
+
+ init接口会返回init操作是否成功。
+
+ ```js
+ var alias = 'test001'
+ var properties = new Array();
+ properties[0] = {
+ tag: huks.HuksTag.HUKS_TAG_ALGORITHM,
+ value: huks.HksKeyAlg.HKS_ALG_DH
+ };
+ properties[1] = {
+ tag: huks.HksTag.HKS_TAG_PURPOSE,
+ value: huks.HksKeyPurpose.HKS_KEY_PURPOSE_AGREE
+ };
+ properties[2] = {
+ tag: huks.HksTag.HKS_TAG_KEY_SIZE
+ value: huks.HksKeySize.HKS_DH_KEY_SIZE_4096
+ };
+ var options = {
+ properties: properties
+ };
+ huks.init(alias, options, function (err, data){});
+ ```
+
+4. 使用Update接口进行update操作。
+
+ handle为更新密钥的session id,options为更新密钥用的参数集合,需根据具体需要到的算法设定options中的参数。
+
+ update接口会返回update操作是否成功。
+
+ ```js
+ var properties = new Array();
+ properties[0] = {
+ tag: huks.HuksTag.HUKS_TAG_ALGORITHM,
+ value: huks.HksKeyAlg.HKS_ALG_DH
+ };
+ properties[1] = {
+ tag: huks.HksTag.HKS_TAG_PURPOSE,
+ value: huks.HksKeyPurpose.HKS_KEY_PURPOSE_AGREE
+ };
+ properties[2] = {
+ tag: huks.HksTag.HKS_TAG_KEY_SIZE
+ value: huks.HksKeySize.HKS_DH_KEY_SIZE_4096
+ };
+ var options = {
+ properties: properties
+ };
+ huks.update(handle, options, function (err, data){});
+ ```
+
+5. 使用Finish接口进行finish操作。
+
+ handle为 结束密钥的session id,options为结束密钥用的参数集合,需根据具体需要到的算法设定options中的参数。
+
+ finish接口会返回finish操作是否成功。
+
+ ```js
+ var properties = new Array();
+ properties[0] = {
+ tag: huks.HuksTag.HUKS_TAG_ALGORITHM,
+ value: huks.HksKeyAlg.HKS_ALG_DH
+ };
+ properties[1] = {
+ tag: huks.HksTag.HKS_TAG_PURPOSE,
+ value: huks.HksKeyPurpose.HKS_KEY_PURPOSE_AGREE
+ };
+ properties[2] = {
+ tag: huks.HksTag.HKS_TAG_KEY_SIZE
+ value: huks.HksKeySize.HKS_DH_KEY_SIZE_4096
+ };
+ var options = {
+ properties: properties
+ };
+ huks.finish(handle, options, function (err, data){});
+ ```
+
+
+
diff --git a/zh-cn/application-dev/webgl/Readme-CN.md b/zh-cn/application-dev/webgl/Readme-CN.md
new file mode 100644
index 0000000000000000000000000000000000000000..89d715d5a45a30e3a78c76937f835d89d2527549
--- /dev/null
+++ b/zh-cn/application-dev/webgl/Readme-CN.md
@@ -0,0 +1,4 @@
+# WebGL
+
+- [概述](webgl-overview.md)
+- [WebGL开发指导](webgl-guidelines.md)
diff --git a/zh-cn/application-dev/webgl/figures/zh-cn_image_0000001192269746.gif b/zh-cn/application-dev/webgl/figures/zh-cn_image_0000001192269746.gif
new file mode 100644
index 0000000000000000000000000000000000000000..e4c7ed66998e8c6b4b87c587edb5986cc547d9dc
Binary files /dev/null and b/zh-cn/application-dev/webgl/figures/zh-cn_image_0000001192269746.gif differ
diff --git a/zh-cn/application-dev/webgl/figures/zh-cn_image_0000001192429306.gif b/zh-cn/application-dev/webgl/figures/zh-cn_image_0000001192429306.gif
new file mode 100644
index 0000000000000000000000000000000000000000..2297841f49ed784fbe4ecd131df8965202e1c14c
Binary files /dev/null and b/zh-cn/application-dev/webgl/figures/zh-cn_image_0000001192429306.gif differ
diff --git a/zh-cn/application-dev/webgl/figures/zh-cn_image_0000001238544451.png b/zh-cn/application-dev/webgl/figures/zh-cn_image_0000001238544451.png
new file mode 100644
index 0000000000000000000000000000000000000000..007ac6263648c83671d4b085cfc9103f6391be6d
Binary files /dev/null and b/zh-cn/application-dev/webgl/figures/zh-cn_image_0000001238544451.png differ
diff --git a/zh-cn/application-dev/webgl/public_sys-resources/icon-caution.gif b/zh-cn/application-dev/webgl/public_sys-resources/icon-caution.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/zh-cn/application-dev/webgl/public_sys-resources/icon-caution.gif differ
diff --git a/zh-cn/application-dev/webgl/public_sys-resources/icon-danger.gif b/zh-cn/application-dev/webgl/public_sys-resources/icon-danger.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/zh-cn/application-dev/webgl/public_sys-resources/icon-danger.gif differ
diff --git a/zh-cn/application-dev/webgl/public_sys-resources/icon-note.gif b/zh-cn/application-dev/webgl/public_sys-resources/icon-note.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6314297e45c1de184204098efd4814d6dc8b1cda
Binary files /dev/null and b/zh-cn/application-dev/webgl/public_sys-resources/icon-note.gif differ
diff --git a/zh-cn/application-dev/webgl/public_sys-resources/icon-notice.gif b/zh-cn/application-dev/webgl/public_sys-resources/icon-notice.gif
new file mode 100644
index 0000000000000000000000000000000000000000..86024f61b691400bea99e5b1f506d9d9aef36e27
Binary files /dev/null and b/zh-cn/application-dev/webgl/public_sys-resources/icon-notice.gif differ
diff --git a/zh-cn/application-dev/webgl/public_sys-resources/icon-tip.gif b/zh-cn/application-dev/webgl/public_sys-resources/icon-tip.gif
new file mode 100644
index 0000000000000000000000000000000000000000..93aa72053b510e456b149f36a0972703ea9999b7
Binary files /dev/null and b/zh-cn/application-dev/webgl/public_sys-resources/icon-tip.gif differ
diff --git a/zh-cn/application-dev/webgl/public_sys-resources/icon-warning.gif b/zh-cn/application-dev/webgl/public_sys-resources/icon-warning.gif
new file mode 100644
index 0000000000000000000000000000000000000000..6e90d7cfc2193e39e10bb58c38d01a23f045d571
Binary files /dev/null and b/zh-cn/application-dev/webgl/public_sys-resources/icon-warning.gif differ
diff --git a/zh-cn/application-dev/webgl/webgl-guidelines.md b/zh-cn/application-dev/webgl/webgl-guidelines.md
new file mode 100644
index 0000000000000000000000000000000000000000..6495b6aeb122781b25d4fdeb25e41327399c43bd
--- /dev/null
+++ b/zh-cn/application-dev/webgl/webgl-guidelines.md
@@ -0,0 +1,708 @@
+# WebGL开发指导
+
+## 场景介绍
+
+WebGL主要帮助开发者在前端开发中完成图形图像的相关处理,比如绘制彩色图形等。
+
+
+## 接口说明
+
+使用WebGL开放能力需导入模块:
+
+```
+import webgl from "@ohos.webglnapi";
+```
+
+**表1** WebGL主要接口列表
+
+| 接口名 | 描述 |
+| -------- | -------- |
+| canvas.getContext | 获取canvas对象上下文。 |
+| webgl.createBuffer(): WebGLBuffer \| null | 创建与初始化WebGL数据缓冲区。 |
+| webgl.bindBuffer(target: GLenum, buffer: WebGLBuffer \| null): void | 将WebGL数据缓冲区与目标进行绑定。 |
+| webgl.bufferData(target: GLenum, srcData: ArrayBufferView, usage: GLenum, srcOffset: GLuint, length?: GLuint): void | 创建并初始化WebGL的数据存储区。 |
+| webgl.getAttribLocation(program: WebGLProgram, name: string): GLint | 从给定WebGL着色程序中获取着色器中attribute变量的地址。 |
+| webgl.vertexAttribPointer(index: GLuint, size: GLint, type: GLenum, normalized: GLboolean, stride: GLsizei, offset: GLintptr): void | 将缓冲区对象分配给变量。 |
+| webgl.enableVertexAttribArray(index: GLuint): void | 连接变量与分配给它的缓冲区对象。 |
+| webgl.clearColor(red: GLclampf, green: GLclampf, blue: GLclampf, alpha: GLclampf): void | 清空<canvas>指定的颜色。 |
+| webgl.clear(mask: GLbitfield): void | 清空<canvas>。 |
+| webgl.drawArrays(mode: GLenum, first: GLint, count: GLsizei): void | 执行数据绘制。 |
+| webgl.flush(): void | 刷新数据至GPU,清空缓冲区。 |
+| webgl.createProgram(): WebGLProgram \| null | 创建着色器程序对象。 |
+
+
+## 开发步骤
+
+以下分别展示无着色器绘制2D图形和着色器绘制彩色三角形的两个场景示例及开发过程。
+
+>  **说明:**
+> 使用WebGL开发时,为保证界面图形显示效果,请使用真机运行。
+
+
+### 无着色器绘制2D图形
+
+此场景为未使用WebGL绘制的2D图形(CPU绘制非GPU绘制)。开发示例如下:
+
+1. 创建页面布局。index.hml示例如下:
+ ```
+