update docs

Signed-off-by: Nzengyawen <zengyawen1@huawei.com>

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)

en/application-dev/reference/apis/js-apis-i18n.md

-#  Internationalization (i18n)<a name="EN-US_TOPIC_0000001222383529"></a>
+# Internationalization \(i18n\)<a name="EN-US_TOPIC_0000001222383529"></a>
 
-
->![](../../public_sys-resources/icon-note.gif) **NOTE:** 
+>![](public_sys-resources/icon-note.gif) **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
 
     <a name="table8262171319013"></a>
-
     <table><thead align="left"><tr id="row726281313010"><th class="cellrowborder" valign="top" width="14.92%" id="mcps1.1.5.1.1"><p id="p426217131016"><a name="p426217131016"></a><a name="p426217131016"></a>Name</p>
     </th>
     <th class="cellrowborder" valign="top" width="11.5%" id="mcps1.1.5.1.2"><p id="p42622131804"><a name="p42622131804"></a><a name="p42622131804"></a>Type</p>
@@ -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.is24HourClock<sup>8+</sup><a name="section14478141717399"></a>
+
+is24HourClock\(\): boolean
+
+Checks whether the 24-hour clock is used.
+
+-   Return values
+
+    <a name="table34809176399"></a>
+    <table><thead align="left"><tr id="row2480161716398"><th class="cellrowborder" valign="top" width="20.05%" id="mcps1.1.3.1.1"><p id="p24806175395"><a name="p24806175395"></a><a name="p24806175395"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="79.95%" id="mcps1.1.3.1.2"><p id="p114805171395"><a name="p114805171395"></a><a name="p114805171395"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row1748019177398"><td class="cellrowborder" valign="top" width="20.05%" headers="mcps1.1.3.1.1 "><p id="p7480191783911"><a name="p7480191783911"></a><a name="p7480191783911"></a>boolean</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="79.95%" headers="mcps1.1.3.1.2 "><p id="p1748010175390"><a name="p1748010175390"></a><a name="p1748010175390"></a>The value <strong id="b19194155614566"><a name="b19194155614566"></a><a name="b19194155614566"></a>true</strong> indicates that the 24-hour clock is used, and value <strong id="b181941956185614"><a name="b181941956185614"></a><a name="b181941956185614"></a>false</strong> indicates the opposite.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+
+-   Example
+
+    ```
+    var is24HourClock = i18n.is24HourClock();
+    ```
+
+
+## i18n.set24HourClock<sup>8+</sup><a name="section18641140104217"></a>
+
+set24HourClock\(option: boolean\): boolean
+
+Sets the 24-hour clock.
+
+-   Parameters
+
+    <a name="table198641540144216"></a>
+    <table><thead align="left"><tr id="row0865174084217"><th class="cellrowborder" valign="top" width="11.119698579847357%" id="mcps1.1.5.1.1"><p id="p108651840124215"><a name="p108651840124215"></a><a name="p108651840124215"></a>Name</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="22.905999420345864%" id="mcps1.1.5.1.2"><p id="p18865174084214"><a name="p18865174084214"></a><a name="p18865174084214"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="6.356873732006569%" id="mcps1.1.5.1.3"><p id="p1786594019422"><a name="p1786594019422"></a><a name="p1786594019422"></a>Mandatory</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="59.61742826780022%" id="mcps1.1.5.1.4"><p id="p17865840154213"><a name="p17865840154213"></a><a name="p17865840154213"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row18865114018426"><td class="cellrowborder" valign="top" width="11.119698579847357%" headers="mcps1.1.5.1.1 "><p id="p19865174012428"><a name="p19865174012428"></a><a name="p19865174012428"></a>option</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="22.905999420345864%" headers="mcps1.1.5.1.2 "><p id="p188651940124213"><a name="p188651940124213"></a><a name="p188651940124213"></a>boolean</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="6.356873732006569%" headers="mcps1.1.5.1.3 "><p id="p68653407422"><a name="p68653407422"></a><a name="p68653407422"></a>Yes</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="59.61742826780022%" headers="mcps1.1.5.1.4 "><p id="p148651140114219"><a name="p148651140114219"></a><a name="p148651140114219"></a>Whether to enable the 24-hour clock. The value <strong id="b689195563"><a name="b689195563"></a><a name="b689195563"></a>true</strong> means to enable the 24-hour clock, and value <strong id="b1589185866"><a name="b1589185866"></a><a name="b1589185866"></a>false</strong> means the opposite.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+-   Return values
+
+    <a name="table6866154011420"></a>
+    <table><thead align="left"><tr id="row4866104074218"><th class="cellrowborder" valign="top" width="20.05%" id="mcps1.1.3.1.1"><p id="p1286684017426"><a name="p1286684017426"></a><a name="p1286684017426"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="79.95%" id="mcps1.1.3.1.2"><p id="p12866164013423"><a name="p12866164013423"></a><a name="p12866164013423"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row986614405427"><td class="cellrowborder" valign="top" width="20.05%" headers="mcps1.1.3.1.1 "><p id="p128661840164214"><a name="p128661840164214"></a><a name="p128661840164214"></a>boolean</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="79.95%" headers="mcps1.1.3.1.2 "><p id="p9866540184217"><a name="p9866540184217"></a><a name="p9866540184217"></a>The value <strong id="b15855131872"><a name="b15855131872"></a><a name="b15855131872"></a>true</strong> indicates that the 24-hour clock is enabled, and value <strong id="b178561317714"><a name="b178561317714"></a><a name="b178561317714"></a>false</strong> indicates the opposite.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+
+-   Example
+
+    ```
+    // Set the system time to the 24-hour format.
+    var success = I18n.set24HourClock(true);
+    ```
+
+
+## i18n.addPreferredLanguage<sup>8+</sup><a name="section172652268110"></a>
+
+addPreferredLanguage\(language: string, index?: number\): boolean
+
+Adds a preferred language to the specified position on the preferred language list.
+
+-   Parameters
+
+    <a name="table142651326910"></a>
+    <table><thead align="left"><tr id="row132661426116"><th class="cellrowborder" valign="top" width="11.119698579847357%" id="mcps1.1.5.1.1"><p id="p1526611266117"><a name="p1526611266117"></a><a name="p1526611266117"></a>Name</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="22.905999420345864%" id="mcps1.1.5.1.2"><p id="p4266202615111"><a name="p4266202615111"></a><a name="p4266202615111"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="6.356873732006569%" id="mcps1.1.5.1.3"><p id="p1266142618120"><a name="p1266142618120"></a><a name="p1266142618120"></a>Mandatory</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="59.61742826780022%" id="mcps1.1.5.1.4"><p id="p192667261816"><a name="p192667261816"></a><a name="p192667261816"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row15266132613114"><td class="cellrowborder" valign="top" width="11.119698579847357%" headers="mcps1.1.5.1.1 "><p id="p72669268119"><a name="p72669268119"></a><a name="p72669268119"></a>language</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="22.905999420345864%" headers="mcps1.1.5.1.2 "><p id="p1326618261915"><a name="p1326618261915"></a><a name="p1326618261915"></a>string</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="6.356873732006569%" headers="mcps1.1.5.1.3 "><p id="p52661126516"><a name="p52661126516"></a><a name="p52661126516"></a>Yes</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="59.61742826780022%" headers="mcps1.1.5.1.4 "><p id="p626616267116"><a name="p626616267116"></a><a name="p626616267116"></a>Preferred language to add.</p>
+    </td>
+    </tr>
+    <tr id="row1440202111317"><td class="cellrowborder" valign="top" width="11.119698579847357%" headers="mcps1.1.5.1.1 "><p id="p11403216314"><a name="p11403216314"></a><a name="p11403216314"></a>index</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="22.905999420345864%" headers="mcps1.1.5.1.2 "><p id="p94011213311"><a name="p94011213311"></a><a name="p94011213311"></a>number</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="6.356873732006569%" headers="mcps1.1.5.1.3 "><p id="p0401721335"><a name="p0401721335"></a><a name="p0401721335"></a>No</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="59.61742826780022%" headers="mcps1.1.5.1.4 "><p id="p14019219311"><a name="p14019219311"></a><a name="p14019219311"></a>Position to which the preferred language is added.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+-   Return values
+
+    <a name="table13267152615111"></a>
+    <table><thead align="left"><tr id="row1826711261616"><th class="cellrowborder" valign="top" width="20.05%" id="mcps1.1.3.1.1"><p id="p14267182618116"><a name="p14267182618116"></a><a name="p14267182618116"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="79.95%" id="mcps1.1.3.1.2"><p id="p226720261312"><a name="p226720261312"></a><a name="p226720261312"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row142679261110"><td class="cellrowborder" valign="top" width="20.05%" headers="mcps1.1.3.1.1 "><p id="p1826710267120"><a name="p1826710267120"></a><a name="p1826710267120"></a>boolean</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="79.95%" headers="mcps1.1.3.1.2 "><p id="p1626712619118"><a name="p1626712619118"></a><a name="p1626712619118"></a>The value <strong id="b92874433115"><a name="b92874433115"></a><a name="b92874433115"></a>true</strong> indicates that the preferred language is added, and value <strong id="b1028774381119"><a name="b1028774381119"></a><a name="b1028774381119"></a>false</strong> indicates the opposite.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+
+-   Example
+
+    ```
+    // Add zh-CN to the preferred language list.
+    var language = 'zh-CN';
+    var index = 0;
+    var success = i18n.addPreferredLanguage(langauge, index);
+    ```
+
+
+## i18n.removePreferredLanguage<sup>8+</sup><a name="section387225261020"></a>
+
+removePreferredLanguage\(index: number\): boolean
+
+Deletes a preferred language from the specified position on the preferred language list.
+
+-   Parameters
+
+    <a name="table087217521108"></a>
+    <table><thead align="left"><tr id="row148721152181010"><th class="cellrowborder" valign="top" width="11.119698579847357%" id="mcps1.1.5.1.1"><p id="p128721952181013"><a name="p128721952181013"></a><a name="p128721952181013"></a>Name</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="22.905999420345864%" id="mcps1.1.5.1.2"><p id="p19872135251011"><a name="p19872135251011"></a><a name="p19872135251011"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="6.356873732006569%" id="mcps1.1.5.1.3"><p id="p1787395281013"><a name="p1787395281013"></a><a name="p1787395281013"></a>Mandatory</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="59.61742826780022%" id="mcps1.1.5.1.4"><p id="p128733529105"><a name="p128733529105"></a><a name="p128733529105"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row1987305241015"><td class="cellrowborder" valign="top" width="11.119698579847357%" headers="mcps1.1.5.1.1 "><p id="p98731752141012"><a name="p98731752141012"></a><a name="p98731752141012"></a>index</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="22.905999420345864%" headers="mcps1.1.5.1.2 "><p id="p13873105218101"><a name="p13873105218101"></a><a name="p13873105218101"></a>number</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="6.356873732006569%" headers="mcps1.1.5.1.3 "><p id="p07471211151218"><a name="p07471211151218"></a><a name="p07471211151218"></a>Yes</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="59.61742826780022%" headers="mcps1.1.5.1.4 "><p id="p0873252171016"><a name="p0873252171016"></a><a name="p0873252171016"></a>Position of the preferred language to delete.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+-   Return values
+
+    <a name="table187316520107"></a>
+    <table><thead align="left"><tr id="row1787425218101"><th class="cellrowborder" valign="top" width="20.05%" id="mcps1.1.3.1.1"><p id="p17874135261019"><a name="p17874135261019"></a><a name="p17874135261019"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="79.95%" id="mcps1.1.3.1.2"><p id="p19874175216103"><a name="p19874175216103"></a><a name="p19874175216103"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row1287405212100"><td class="cellrowborder" valign="top" width="20.05%" headers="mcps1.1.3.1.1 "><p id="p28744521105"><a name="p28744521105"></a><a name="p28744521105"></a>boolean</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="79.95%" headers="mcps1.1.3.1.2 "><p id="p1487495219109"><a name="p1487495219109"></a><a name="p1487495219109"></a>The value <strong id="b714042831817"><a name="b714042831817"></a><a name="b714042831817"></a>true</strong> indicates that the preferred language is deleted, and value <strong id="b9140182881818"><a name="b9140182881818"></a><a name="b9140182881818"></a>false</strong> indicates the opposite.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+
+-   Example
+
+    ```
+    // Delete the first preferred language from the preferred language list.
+    var index = 0;
+    var success = i18n.removePreferredLanguage(index);
+    ```
+
+
+## i18n.getPreferredLanguageList<sup>8+</sup><a name="section1778693018146"></a>
+
+getPreferredLanguageList\(\): Array<string\>
+
+Obtains the preferred language list.
+
+-   Return values
+
+    <a name="table207875303146"></a>
+    <table><thead align="left"><tr id="row1778863061413"><th class="cellrowborder" valign="top" width="20.05%" id="mcps1.1.3.1.1"><p id="p5788133081419"><a name="p5788133081419"></a><a name="p5788133081419"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="79.95%" id="mcps1.1.3.1.2"><p id="p10788163012141"><a name="p10788163012141"></a><a name="p10788163012141"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row7788193014144"><td class="cellrowborder" valign="top" width="20.05%" headers="mcps1.1.3.1.1 "><p id="p978863011145"><a name="p978863011145"></a><a name="p978863011145"></a>Array&lt;string&gt;</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="79.95%" headers="mcps1.1.3.1.2 "><p id="p978843081410"><a name="p978843081410"></a><a name="p978843081410"></a>Preferred language list.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+
+-   Example
+
+    ```
+    var preferredLanguageList = i18n.getPreferredLanguageList();
+    ```
+
+
+## i18n.getFirstPreferredLanguage<sup>8+</sup><a name="section13449512141812"></a>
+
+getFirstPreferredLanguage\(\): string
+
+Obtains the preferred language that best matches the HAP resource.
+
+-   Return values
+
+    <a name="table12451312111817"></a>
+    <table><thead align="left"><tr id="row345111214183"><th class="cellrowborder" valign="top" width="20.05%" id="mcps1.1.3.1.1"><p id="p0451101211816"><a name="p0451101211816"></a><a name="p0451101211816"></a>Type</p>
+    </th>
+    <th class="cellrowborder" valign="top" width="79.95%" id="mcps1.1.3.1.2"><p id="p04511912131814"><a name="p04511912131814"></a><a name="p04511912131814"></a>Description</p>
+    </th>
+    </tr>
+    </thead>
+    <tbody><tr id="row1245171251813"><td class="cellrowborder" valign="top" width="20.05%" headers="mcps1.1.3.1.1 "><p id="p11451312151815"><a name="p11451312151815"></a><a name="p11451312151815"></a>string</p>
+    </td>
+    <td class="cellrowborder" valign="top" width="79.95%" headers="mcps1.1.3.1.2 "><p id="p54511512101816"><a name="p54511512101816"></a><a name="p54511512101816"></a>Preferred language that best matches the HAP resource.</p>
+    </td>
+    </tr>
+    </tbody>
+    </table>
+
+
+-   Example
+
+    ```
+    var firstPreferredLangauge = i18n.getFirstPreferredLangauge();
+    ```
+

en/application-dev/webgl/Readme-EN.md

+# WebGL
+
+- [WebGL Overview](webgl-overview.md)
+- [WebGL Development](webgl-guidelines.md)

en/application-dev/webgl/webgl-guidelines.md

+# 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.
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **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:
+   
+   ```
+   <div class="container">
+       <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
+       <button class="btn-button" onclick="BtnDraw2D">BtnDraw2D</button>
+   </div>
+   ```
+
+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 <canvas> 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
+
+![en-us_image_0000001192269746](figures/en-us_image_0000001192269746.gif)
+
+
+### 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:
+   
+   ```
+   <div class="container">
+   <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
+   <button class="btn-button" onclick="BtnColorTriangle">BtnColorTriangle</button>
+   </div>
+   ```
+
+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 <canvas> 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 <canvas> to be cleared.
+           gl.clearColor(0.0, 0.0, 0.0, 1.0);
+   
+           // Clear <canvas>.
+           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
+
+![en-us_image_0000001192429306](figures/en-us_image_0000001192429306.gif)

en/application-dev/webgl/webgl-overview.md

+# 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
+
+![en-us_image_0000001238544451](figures/en-us_image_0000001238544451.png)
+
+
+- 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.

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)
 

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)
 

zh-cn/application-dev/ability/ability-assistant-guidelines.md

+# 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 <device-id>] -a <ability-name> -b <bundle-name> [-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 <device-id>] -a <ability-name> -b <bundle-name>
+  ```
+  
+- **dump**
+
+  用于打印Ability的相关信息。
+
+  | 参数                   | 参数说明                               |
+  | ---------------------- | -------------------------------------- |
+  | -h/--help              | 帮助信息。                             |
+  | -a/--all               | 打印所有mission内的Ability。           |
+  | -s/--stack \<number>   | 打印指定mission stack内的Ability。     |
+  | -m/--mission \<number> | 打印指定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 <bundle-name>
+  ```
\ No newline at end of file

zh-cn/application-dev/connectivity/ipc-rpc.md

-# 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

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)

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 |表示未知错误。<br/>**系统能力**：SystemCapability.Security.Huks|
 
 
-## huks.HuksKeyPurpose
+## HuksKeyPurpose
 
 表示密钥（密钥对）用途。
 
@@ -100,7 +100,7 @@ import huks from '@ohos.security.huks'
 | HUKS_KEY_PURPOSE_MAC     | 128  | 表示密钥用于生成mac消息验证码。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_KEY_PURPOSE_AGREE   | 256  | 表示密钥对用于进行密钥协商。<br/>**系统能力**：SystemCapability.Security.Huks |
 
-## huks.HuksKeyDigest
+## HuksKeyDigest
 
 表示摘要算法。
 
@@ -114,7 +114,7 @@ import huks from '@ohos.security.huks'
 | HUKS_DIGEST_SHA384  | 13  | 表示SHA384摘要算法。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_DIGEST_SHA512 | 14  | 表示SHA512摘要算法。<br/>**系统能力**：SystemCapability.Security.Huks |
 
-## huks.HuksKeyPadding
+## HuksKeyPadding
 
 表示补齐算法。
 
@@ -127,7 +127,7 @@ import huks from '@ohos.security.huks'
 | HUKS_PADDING_PKCS5 | 4   | 表示使用PKCS5补齐算法。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_PADDING_PKCS7 | 5   | 表示使用PKCS7补齐算法。<br/>**系统能力**：SystemCapability.Security.Huks |
 
-## huks.HuksCipherMode
+## HuksCipherMode
 
 表示加密模式。
 
@@ -140,7 +140,7 @@ import huks from '@ohos.security.huks'
 | HUKS_MODE_CCM | 31   | 表示使用CCM加密模式。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_MODE_GCM | 32   | 表示使用GCM加密模式。<br/>**系统能力**：SystemCapability.Security.Huks |
 
-## huks.HuksKeySize
+## HuksKeySize
 
 表示密钥（密钥对）长度。
 
@@ -165,7 +165,7 @@ import huks from '@ohos.security.huks'
 | HUKS_DH_KEY_SIZE_3072        | 3072 | 表示使用DH算法的密钥对长度为3072bit。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_DH_KEY_SIZE_4096        | 4096 | 表示使用DH算法的密钥对长度为4096bit。<br/>**系统能力**：SystemCapability.Security.Huks |
 
-## huks.HuksKeyAlg
+## HuksKeyAlg
 
 表示密钥使用的算法。
 
@@ -183,7 +183,7 @@ import huks from '@ohos.security.huks'
 | HUKS_ALG_ED25519 | 102  | 表示使用ED25519算法。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_ALG_DH      | 103  | 表示使用DH算法。<br/>**系统能力**：SystemCapability.Security.Huks |
 
-## huks.HuksKeyGenerateType
+## HuksKeyGenerateType
 
 表示生成密钥的类型。
 
@@ -193,7 +193,7 @@ import huks from '@ohos.security.huks'
 | HUKS_KEY_GENERATE_TYPE_DERIVE  | 1    | 派生生成的密钥。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_KEY_GENERATE_TYPE_AGREE   | 2    | 协商生成的密钥。<br/>**系统能力**：SystemCapability.Security.Huks |
 
-## huks.HuksKeyFlag
+## HuksKeyFlag
 
 表示密钥的产生方式。
 
@@ -204,7 +204,7 @@ import huks from '@ohos.security.huks'
 | HUKS_KEY_FLAG_AGREE_KEY    | 3    | 表示通过生成密钥协商接口生成的密钥。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_KEY_FLAG_DERIVE_KEY   | 4    | 表示通过生成密钥派生接口生成的密钥。<br/>**系统能力**：SystemCapability.Security.Huks |
 
-## huks.HuksKeyStorageType
+## HuksKeyStorageType
 
 表示密钥存储方式。
 
@@ -213,14 +213,14 @@ import huks from '@ohos.security.huks'
 | HUKS_STORAGE_TEMP       | 0    | 表示通过本地直接管理密钥。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_STORAGE_PERSISTENT | 1    | 表示通过HUKS service管理密钥。<br/>**系统能力**：SystemCapability.Security.Huks |
 
-## huks.HuksSendType
+## HuksSendType
 
 | 名称                 | 值   | 说明                                                         |
 | -------------------- | ---- | ------------------------------------------------------------ |
 | HUKS_SEND_TYPE_ASYNC | 0    | 表示异步发送TAG。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_SEND_TYPE_SYNC  | 1    | 表示同步发送TAG。<br/>**系统能力**：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。<br/>**系统能力**：SystemCapability.Security.Huks |
 | HUKS_TAG_TYPE_BYTES   | 5 << 28 | 表示该Tag的数据类型为Uint8Array。<br/>**系统能力**：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<HuksResult>) : void
+generateKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void
 
 通过Callback方法生成密钥（密钥对）。
 
@@ -367,10 +365,9 @@ var options = {
 huks.generateKey(alias, options, function (err, data){}); 
 ```
 
+## huks.generateKey
 
-
-
-- generateKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>
+generateKey(keyAlias: string, options: HuksOptions) : Promise\<HuksResult>
 
 通过Promise方法生成密钥（密钥对）。
 
@@ -424,9 +421,7 @@ var result = await huks.generateKey(alias, options);
 
 ## huks.deleteKey
 
-目前有两种方式：
-
-- deleteKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void
+deleteKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void
 
 针对Callback生成的密钥进行删除。
 
@@ -448,9 +443,9 @@ var emptyOptions = {
 huks.deleteKey(alias, emptyOptions, function (err, data) {});
 ```
 
+## huks.deleteKey
 
-
-- deleteKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>
+deleteKey(keyAlias: string, options: HuksOptions) : Promise\<HuksResult>
 
 针对Promise生成的密钥进行删除。
 
@@ -506,9 +501,7 @@ var result = await huks.getSdkVersion(emptyOptions);
 
 ## huks.importKey
 
-目前有两种方式：
-
-- importKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void
+importKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void
 
 导入Callback方法生成的密钥对 。
 
@@ -518,7 +511,7 @@ var result = await huks.getSdkVersion(emptyOptions);
 | -------- | ------------------------ | ---- | ------------------------------------------------- |
 | keyAlias | string                   | 是   | 密钥别名，用于存放所需密钥。<br/>**系统能力**：SystemCapability.Security.Huks |
 | options  | [HuksOptions](#huksoptions) | 是   | 用于导入时所需TAG和需要导入的密钥。<br/>**系统能力**：SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HuksResult](huksresult)> | 是   | 返回HUKS_SUCCESS时表示接口使用成功，其他时为错误。<br/>**系统能力**：SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HuksResult](#huksresult)> | 是   | 返回HUKS_SUCCESS时表示接口使用成功，其他时为错误。<br/>**系统能力**：SystemCapability.Security.Huks |
 
 **示例：**
 
@@ -552,11 +545,11 @@ var options = {
 huks.importKey(keyAlias, options, function (err, data){});
 ```
 
+## huks.importKey
 
+importKey(keyAlias: string, options: HuksOptions) : Promise\<HuksResult>
 
-- importKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>
-
-导入Promise方法生成的密钥对
+导入Promise方法生成的密钥对。
 
 **参数：**
 
@@ -605,19 +598,17 @@ var result = await huks.importKey(keyAlias, options);
 
 ## huks.exportKey
 
-目前有两种方式：
-
-- exportKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void
+exportKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void
 
 导出Callback方法生成的密钥对。
 
 **参数：**
 
-| 参数名   | 类型                                     | 必填 | 说明                                                         |
-| -------- | ---------------------------------------- | ---- | ------------------------------------------------------------ |
-| keyAlias | string                                   | 是   | 密钥别名，应与所用密钥生成时使用的别名相同。<br/>**系统能力**：SystemCapability.Security.Huks |
-| options  | [HuksOptions](#huksoptions)              | 是   | 空对象（此处传空即可）。<br/>**系统能力**：SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HuksResult](huksresult)> | 是   | 返回HUKS_SUCCESS时表示接口使用成功，其他时为错误。outData：返回从密钥中导出的公钥。<br/>**系统能力**：SystemCapability.Security.Huks |
+| 参数名   | 类型                                      | 必填 | 说明                                                         |
+| -------- | ----------------------------------------- | ---- | ------------------------------------------------------------ |
+| keyAlias | string                                    | 是   | 密钥别名，应与所用密钥生成时使用的别名相同。<br/>**系统能力**：SystemCapability.Security.Huks |
+| options  | [HuksOptions](#huksoptions)               | 是   | 空对象（此处传空即可）。<br/>**系统能力**：SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HuksResult](#huksresult)> | 是   | 返回HUKS_SUCCESS时表示接口使用成功，其他时为错误。outData：返回从密钥中导出的公钥。<br/>**系统能力**：SystemCapability.Security.Huks |
 
 **示例：**
 
@@ -629,9 +620,9 @@ var emptyOptions = {
 huks.exportKey(keyAlias, emptyOptions, function (err, data){});
 ```
 
+## huks.exportKey
 
-
-- exportKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>
+exportKey(keyAlias: string, options: HuksOptions) : Promise\<HuksResult>
 
 导出Promise方法生成的密钥对。
 
@@ -660,9 +651,7 @@ var result = await huks.exportKey(keyAlias, emptyOptions);
 
 ## huks.getKeyProperties
 
-目前有两种方式：
-
-- getKeyProperties(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void
+getKeyProperties(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void
 
 获取Callback方法生成的密钥属性。
 
@@ -684,9 +673,9 @@ var emptyOptions = {
 huks.getKeyProperties(keyAlias, emptyOptions, function (err, data){});
 ```
 
+## huks.getKeyProperties
 
-
-- getKeyProperties(keyAlias: string, options: HuksOptions) : Promise<HuksResult>
+getKeyProperties(keyAlias: string, options: HuksOptions) : Promise\<HuksResult>
 
 获取Promise方法生成的密钥属性。
 
@@ -715,9 +704,7 @@ var result = await huks.getKeyProperties(keyAlias, emptyOptions);
 
 ## huks.isKeyExist
 
-目前有两种方式：
-
-- isKeyExist(keyAlias: string, options: HuksOptions, callback: AsyncCallback<boolean>) : void
+isKeyExist(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<boolean>) : void
 
 判断Callback方法生成的密钥是否存在 。
 
@@ -727,7 +714,7 @@ var result = await huks.getKeyProperties(keyAlias, emptyOptions);
 | -------- | ---------------------- | ---- | ------------------------------------- |
 | keyAlias | string                 | 是   | 所需查找的密钥的别名。<br/>**系统能力**：SystemCapability.Security.Huks |
 | options  | [HuksOptions](#huksoptions) | 是   | 空对象（此处传空即可）。<br/>**系统能力**：SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[boolean](#boolean)> | 是   | FALSE代表密钥不存在，TRUE代表密钥存在。<br/>**系统能力**：SystemCapability.Security.Huks |
+| callback | AsyncCallback\<boolean> | 是   | FALSE代表密钥不存在，TRUE代表密钥存在。<br/>**系统能力**：SystemCapability.Security.Huks |
 
 **示例：**
 
@@ -739,9 +726,9 @@ var emptyOptions = {
 huks.isKeyExist(keyAlias, emptyOptions, function (err, data){});
 ```
 
+## huks.isKeyExist
 
-
-- isKeyExist(keyAlias: string, options: HuksOptions) : Promise<boolean>
+isKeyExist(keyAlias: string, options: HuksOptions) : Promise\<boolean>
 
 判断Promise方法生成的密钥是否存在 。
 
@@ -754,9 +741,9 @@ huks.isKeyExist(keyAlias, emptyOptions, function (err, data){});
 
 **返回值：**
 
-| 类型                          | 说明                                                         |
-| ----------------------------- | ------------------------------------------------------------ |
-| Promise\<[boolean](#boolean)> | FALSE代表密钥不存在，TRUE代表密钥存在。<br/>**系统能力**：SystemCapability.Security.Huks |
+| 类型              | 说明                                                         |
+| ----------------- | ------------------------------------------------------------ |
+| Promise\<boolean> | FALSE代表密钥不存在，TRUE代表密钥存在。<br/>**系统能力**：SystemCapability.Security.Huks |
 
 **示例：**
 
@@ -771,10 +758,9 @@ var result = await huks.isKeyExist(keyAlias, emptyOptions);
 
 ## huks.init
 
-Init操作接口，目前有两种方式：
-- init(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksHandle>) : void
+init(keyAlias: string, options: HuksOptions, callback: AsyncCallback\<HuksHandle>) : void
 
-使用callback回调异步返回结果 。
+init操作接口，使用callback回调异步返回结果 。
 
 **参数：**
 
@@ -782,7 +768,7 @@ Init操作接口，目前有两种方式：
 | -------- | ---------------------- | ---- | ------------------------------------- |
 | keyAlias | string                 | 是   | Init操作密钥的别名。<br/>**系统能力**：SystemCapability.Security.Huks |
 | options  | [HuksOptions](#huksoptions) | 是   | Init操作的参数集合。<br/>**系统能力**：SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HuksHandle](#HuksHandle)> | 是   | 将Init操作操作返回的handle添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HuksHandle](#hukshandle)> | 是   | 将Init操作操作返回的handle添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
 
 **示例：**
 
@@ -813,9 +799,11 @@ huks.init(alias, options, function(err, data) {
 })
 ```
 
-- init(keyAlias: string, options: HuksOptions) : Promise<HuksHandle>
+## huks.init
+
+init(keyAlias: string, options: HuksOptions) : Promise\<HuksHandle>
 
-使用Promise方式异步返回结果。
+init操作接口，使用Promise方式异步返回结果。
 
 **参数：**
 
@@ -823,7 +811,7 @@ huks.init(alias, options, function(err, data) {
 | -------- | ---------------------- | ---- | ------------------------------------- |
 | keyAlias | string                 | 是   | Init操作密钥的别名。<br/>**系统能力**：SystemCapability.Security.Huks |
 | options  | [HuksOptions](#huksoptions) | 是   | Init参数集合。<br/>**系统能力**：SystemCapability.Security.Huks |
-| promise | Promise\<[HuksHandle](#HuksHandle)> | 是   | 将Init操作返回的handle添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
+| promise | Promise\<[HuksHandle](#hukshandle)> | 是   | 将Init操作返回的handle添加到密钥管理系统的回调。<br/>**系统能力**：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<HuksResult>) : void
+update(handle: number, token?: Uint8Array, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void
 
-使用callback回调异步返回结果 。
+update操作接口，使用callback回调异步返回结果 。
 
 **参数：**
 
@@ -875,7 +862,7 @@ update操作接口，目前有两种方式：
 | handle | number           | 是   | Update操作的handle。<br/>**系统能力**：SystemCapability.Security.Huks |
 | token | Uint8Array | 否 | Update操作的token。<br/>**系统能力**：SystemCapability.Security.Huks |
 | options  | [HuksOptions](#huksoptions) | 是   | Update的参数集合。<br/>**系统能力**：SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HksResult](#HksResult)> | 是 | 将Update操作的结果添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HksResult](#hksresult)> | 是 | 将Update操作的结果添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
 
 **示例：**
 
@@ -899,9 +886,11 @@ var options = {
 huks.update(handle, options, function (err, data){}); 
 ```
 
-- update(handle: number, token?: Uint8Array, options: HuksOptions) : Promis<HuksResult>
+## huks.update
+
+update(handle: number, token?: Uint8Array, options: HuksOptions) : Promis<HuksResult>
 
-使用Promise方式异步返回结果。
+update操作接口，使用Promise方式异步返回结果。
 
 **参数：**
 
@@ -910,7 +899,7 @@ huks.update(handle, options, function (err, data){});
 | handle | number           | 是   | Update操作的handle。<br/>**系统能力**：SystemCapability.Security.Huks |
 | token | Uint8Array | 否 | Update操作的token。<br/>**系统能力**：SystemCapability.Security.Huks |
 | options  | [HuksOptions](#huksoptions) | 是   | Update操作的参数集合。<br/>**系统能力**：SystemCapability.Security.Huks |
-| promise | Promise\<[HuksResult](#HuksResult)> | 是 | 将Update操作的结果添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
+| promise | Promise\<[HuksResult](#huksresult)> | 是 | 将Update操作的结果添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
 
 **示例：**
 
@@ -938,10 +927,9 @@ var result = huks.update(handle, options)
 
 ## huks.finish
 
-finish操作接口，目前有两种方式：
-- finish(handle: number, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void
+finish(handle: number, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void
 
-使用callback回调异步返回结果 。
+finish操作接口，使用callback回调异步返回结果 。
 
 **参数：**
 
@@ -949,7 +937,7 @@ finish操作接口，目前有两种方式：
 | -------- | ---------------------- | ---- | ------------------------------------- |
 | handle | number           | 是   | Finish操作的handle。<br/>**系统能力**：SystemCapability.Security.Huks |
 | options  | [HuksOptions](#huksoptions) | 是   | Finish的参数集合。<br/>**系统能力**：SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HksResult](#HksResult)> | 是 | 将Finish操作的结果添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HksResult](#hksresult)> | 是 | 将Finish操作的结果添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
 
 **示例：**
 
@@ -973,9 +961,11 @@ var options = {
 huks.finish(handle, options, function (err, data){}); 
 ```
 
-- finish(handle: number, options: HuksOptions) : Promise<HuksResult>
+## huks.finish
+
+finish(handle: number, options: HuksOptions) : Promise\<HuksResult>
 
-使用Promise方式异步返回结果。
+finish操作接口，使用Promise方式异步返回结果。
 
 **参数：**
 
@@ -1012,10 +1002,9 @@ var result = huks.finish(handle, options)
 
 ## huks.abort
 
-abort操作接口，目前有两种方式：
-- abort(handle: number, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void
+abort(handle: number, options: HuksOptions, callback: AsyncCallback\<HuksResult>) : void
 
-使用callback回调异步返回结果 。
+abort操作接口，使用callback回调异步返回结果 。
 
 **参数：**
 
@@ -1023,7 +1012,7 @@ abort操作接口，目前有两种方式：
 | -------- | ---------------------- | ---- | ------------------------------------- |
 | handle | number           | 是   | Abort操作的handle。<br/>**系统能力**：SystemCapability.Security.Huks |
 | options  | [HuksOptions](#huksoptions) | 是   | Abort操作的参数集合。<br/>**系统能力**：SystemCapability.Security.Huks |
-| callback | AsyncCallback\<[HksResult](#HksResult)> | 是 | 将Abort操作的结果添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
+| callback | AsyncCallback\<[HksResult](#hksresult)> | 是 | 将Abort操作的结果添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
 
 **示例：**
 
@@ -1047,9 +1036,11 @@ var options = {
 huks.abort(handle, options, function (err, data){}); 
 ```
 
-- abort(handle: number, options: HuksOptions) : Promise<HuksResult>;
+## huks.abort
+
+abort(handle: number, options: HuksOptions) : Promise\<HuksResult>;
 
-使用Promise方式异步返回结果。
+abort操作接口，使用Promise方式异步返回结果。
 
 **参数：**
 
@@ -1057,7 +1048,7 @@ huks.abort(handle, options, function (err, data){});
 | -------- | ---------------------- | ---- | ------------------------------------- |
 | handle | number           | 是   | Abort操作的handle。<br/>**系统能力**：SystemCapability.Security.Huks |
 | options  | [HuksOptions](#huksoptions) | 是   | Abort操作的参数集合。<br/>**系统能力**：SystemCapability.Security.Huks |
-| promise | Promise\<[HuksResult](#HuksResult)> | 是 | 将Abort操作的结果添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
+| promise | Promise\<[HuksResult](#huksresult)> | 是 | 将Abort操作的结果添加到密钥管理系统的回调。<br/>**系统能力**：SystemCapability.Security.Huks |
 
 **示例：**
 
@@ -1083,34 +1074,28 @@ var options = {
 var result = huks.abort(handle, options);
 ```
 
-##  huks.HuksParam
+##  HuksParam
 
 调用接口使用的options中的properties数组中的param。
 
-**参数：**
-
 | 参数名 | 类型                                | 必填 | 说明                                                        |
 | ------ | ----------------------------------- | ---- | ----------------------------------------------------------- |
 | tag    | HuksTag                             | 是   | 标签<br/>**系统能力**：SystemCapability.Security.Huks       |
 | value  | boolean\|number\|bigint\|Uint8Array | 是   | 标签对应值<br/>**系统能力**：SystemCapability.Security.Huks |
 
-##  huks.HuksOptions
+##  HuksOptions
 
 调用接口使用的options。
 
-**参数：**
-
-| 参数名     | 类型             | 必填 | 说明                                                         |
-| ---------- | ---------------- | ---- | ------------------------------------------------------------ |
-| properties | Array<HuksParam> | 否   | 属性,存HuksParam的数组。<br/>**系统能力**：SystemCapability.Security.Huks |
-| inData     | Uint8Array       | 否   | 输入数据。<br/>**系统能力**：SystemCapability.Security.Huks  |
+| 参数名     | 类型              | 必填 | 说明                                                         |
+| ---------- | ----------------- | ---- | ------------------------------------------------------------ |
+| properties | Array\<HuksParam> | 否   | 属性,存HuksParam的数组。<br/>**系统能力**：SystemCapability.Security.Huks |
+| inData     | Uint8Array        | 否   | 输入数据。<br/>**系统能力**：SystemCapability.Security.Huks  |
 
-##  huks.HuksHandle
+##  HuksHandle
 
 huks Handle结构体。
 
-**参数：**
-
 | 参数名     | 类型             | 必填 | 说明     |
 | ---------- | ---------------- | ---- | -------- |
 | errorCode  | number           | 是   | 错误码<br/>**系统能力**：SystemCapability.Security.Huks |
@@ -1118,16 +1103,14 @@ huks Handle结构体。
 | token | Uint8Array | 否 | 预留字段<br/>**系统能力**：SystemCapability.Security.Huks |
 
 
-##  huks.HuksResult
+##  HuksResult
 
 调用接口返回的result。
 
-**参数：**
-
-| 参数名     | 类型             | 必填 | 说明                                                      |
-| ---------- | ---------------- | ---- | --------------------------------------------------------- |
-| errorCode  | number           | 是   | 错误码<br/>**系统能力**：SystemCapability.Security.Huks   |
-| outData    | Uint8Array       | 否   | 输出数据<br/>**系统能力**：SystemCapability.Security.Huks |
-| properties | Array<HuksParam> | 否   | 属性<br/>**系统能力**：SystemCapability.Security.Huks     |
-| certChains | Array<string>    | 否   | 证书链<br/>**系统能力**：SystemCapability.Security.Huks   |
+| 参数名     | 类型              | 必填 | 说明                                                      |
+| ---------- | ----------------- | ---- | --------------------------------------------------------- |
+| errorCode  | number            | 是   | 错误码<br/>**系统能力**：SystemCapability.Security.Huks   |
+| outData    | Uint8Array        | 否   | 输出数据<br/>**系统能力**：SystemCapability.Security.Huks |
+| properties | Array\<HuksParam> | 否   | 属性<br/>**系统能力**：SystemCapability.Security.Huks     |
+| certChains | Array\<string>    | 否   | 证书链<br/>**系统能力**：SystemCapability.Security.Huks   |
 

zh-cn/application-dev/reference/apis/js-apis-image.md

@@ -8,21 +8,8 @@
 import image from './@ohos.multimedia.image';
 ```
 
-
-## PixelMap<a name="PixelMap"></a>
-图像像素类，用于读取或写入图像数据以及获取图像信息。在调用PixelMap的方法前，需要先通过createPixelMap创建一个PixelMap实例。
-
- **属性**
-
-| 名称       | 类型    | 可读 | 可写 | 说明                                                         |
-| ---------- | ------- | ---- | ---- | ------------------------------------------------------------ |
-| isEditable | boolean | 是   | 否   | 设定是否图像像素可被编辑。<br/>**系统能力：** SystemCapability.Multimedia.Image |
-
-## PixelMap.createPixelMap
-
-```
-createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions): Promise<PixelMap>
-```
+## image.createPixelMap
+createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions): Promise\<PixelMap>
 
 通过colors和opts创建pixelmap。
 
@@ -37,9 +24,9 @@ createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions): Promise<PixelM
 
 **返回值：**
 
-| 类型              | 说明           |
-| ----------------- | -------------- |
-| Promise<PixelMap> | 返回pixelmap。 |
+| 类型               | 说明           |
+| ------------------ | -------------- |
+| Promise\<PixelMap> | 返回pixelmap。 |
 
 **示例：**
 
@@ -51,11 +38,9 @@ image.createPixelMap(Color, opts)
             })
 ```
 
-## PixelMap.createPixelMap
+## image.createPixelMap
 
-```
-createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions) callback: AsyncCallback<PixelMap>): void
-```
+createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions) callback: AsyncCallback\<PixelMap>): void
 
 通过属性创建pixelmap。
 
@@ -67,13 +52,7 @@ createPixelMap(colors: ArrayBuffer, opts: InitializetionOptions) callback: Async
 | -------- | ----------------------------------------------- | ---- | -------------------- |
 | colors   | ArrayBuffer                                     | 是   | 颜色数组。           |
 | opts     | [InitializetionOptions](#InitializationOptions) | 是   | 属性。               |
-| callback | AsyncCallback<PixelMap>                         | 是   | 回调表示成功或失败。 |
-
-**返回值：**
-
-| 类型 | 说明           |
-| ---- | -------------- |
-| void | callback返回空 |
+| callback | AsyncCallback\<PixelMap>                        | 是   | 回调表示成功或失败。 |
 
 **示例：**
 
@@ -84,7 +63,17 @@ image.createPixelMap(Color, opts, (pixelmap) => {
             })
 ```
 
-## PixelMap.readPixelsToBuffer
+## PixelMap<a name="PixelMap"></a>
+
+图像像素类，用于读取或写入图像数据以及获取图像信息。在调用PixelMap的方法前，需要先通过createPixelMap创建一个PixelMap实例。
+
+ ### 属性
+
+| 名称       | 类型    | 可读 | 可写 | 说明                                                         |
+| ---------- | ------- | ---- | ---- | ------------------------------------------------------------ |
+| isEditable | boolean | 是   | 否   | 设定是否图像像素可被编辑。<br/>**系统能力：** SystemCapability.Multimedia.Image |
+
+### readPixelsToBuffer
 
 ```
 readPixelsToBuffer(dst: ArrayBuffer): Promise<void>
@@ -102,9 +91,9 @@ readPixelsToBuffer(dst: ArrayBuffer): Promise<void>
 
 **返回值：**
 
-| 类型          | 说明                                            |
-| :------------ | :---------------------------------------------- |
-| Promise<void> | Promise实例，用于获取结果，失败时返回错误信息。 |
+| 类型           | 说明                                            |
+| :------------- | :---------------------------------------------- |
+| Promise\<void> | Promise实例，用于获取结果，失败时返回错误信息。 |
 
 **示例：**
 
@@ -131,11 +120,9 @@ pixelmap.readPixelsToBuffer(readBuffer).then(() => {
                 })
 ```
 
-## PixelMap.readPixelsToBuffer
+### readPixelsToBuffer
 
-```
-readPixelsToBuffer(dst: ArrayBuffer, callback: AsyncCallback<void>): void
-```
+readPixelsToBuffer(dst: ArrayBuffer, callback: AsyncCallback\<void>): void
 
 读取图像像素数据，结果写入ArrayBuffer里,使用callback形式返回。
 
@@ -143,10 +130,10 @@ readPixelsToBuffer(dst: ArrayBuffer, callback: AsyncCallback<void>): void
 
 **参数：**
 
-| 参数名   | 类型                | 必填 | 说明                                                         |
-| -------- | ------------------- | ---- | ------------------------------------------------------------ |
-| dst      | ArrayBuffer         | 是   | 缓冲区，函数执行结束后获取的图像像素数据写入到该内存区域内。 |
-| callback | AsyncCallback<void> | 是   | 获取回调，失败时返回错误信息。                               |
+| 参数名   | 类型                 | 必填 | 说明                                                         |
+| -------- | -------------------- | ---- | ------------------------------------------------------------ |
+| dst      | ArrayBuffer          | 是   | 缓冲区，函数执行结束后获取的图像像素数据写入到该内存区域内。 |
+| callback | AsyncCallback\<void> | 是   | 获取回调，失败时返回错误信息。                               |
 
 **示例：**
 
@@ -173,11 +160,9 @@ pixelmap.readPixelsToBuffer(readBuffer, () => {
             })
 ```
 
-## PixelMap.readPixels
+### readPixels
 
-```
-readPixels(area: PositionArea): Promise<void>
-```
+readPixels(area: PositionArea): Promise\<void>
 
 读取区域内的图片数据，使用Promise形式返回读取结果。
 
@@ -191,9 +176,9 @@ readPixels(area: PositionArea): Promise<void>
 
 **返回值：**
 
-| 类型          | 说明                                                |
-| :------------ | :-------------------------------------------------- |
-| Promise<void> | Promise实例，用于获取读取结果，失败时返回错误信息。 |
+| 类型           | 说明                                                |
+| :------------- | :-------------------------------------------------- |
+| Promise\<void> | Promise实例，用于获取读取结果，失败时返回错误信息。 |
 
 **示例：**
 
@@ -223,11 +208,9 @@ pixelmap.readPixels(area).then((data) => {
                 })
 ```
 
-## PixelMap.readPixels
+### readPixels
 
-```
-readPixels(area: PositionArea, callback: AsyncCallback<void>): void
-```
+readPixels(area: PositionArea, callback: AsyncCallback\<void>): void
 
 读区域的像素。
 
@@ -238,7 +221,7 @@ readPixels(area: PositionArea, callback: AsyncCallback<void>): void
 | 参数名   | 类型                          | 必填 | 说明                           |
 | -------- | ----------------------------- | ---- | ------------------------------ |
 | area     | [PositionArea](#PositionArea) | 是   | 区域大小，根据区域读取。       |
-| callback | AsyncCallback<void>           | 是   | 获取回调，失败时返回错误信息。 |
+| callback | AsyncCallback\<void>          | 是   | 获取回调，失败时返回错误信息。 |
 
 **示例：**
 
@@ -261,11 +244,9 @@ pixelmap.readPixels(area,(data) => {
                 }
 ```
 
-## PixelMap.writePixels
+### writePixels
 
-```
-writePixels(area: PositionArea): Promise<void>
-```
+writePixels(area: PositionArea): Promise\<void>
 
 先创建pixelmap，将pixelmap写入指定区域内，使用Promise形式返回写入结果。
 
@@ -279,9 +260,9 @@ writePixels(area: PositionArea): Promise<void>
 
 **返回值：**
 
-| 类型          | 说明                                                |
-| :------------ | :-------------------------------------------------- |
-| Promise<void> | Promise实例，用于获取写入结果，失败时返回错误信息。 |
+| 类型           | 说明                                                |
+| :------------- | :-------------------------------------------------- |
+| Promise\<void> | Promise实例，用于获取写入结果，失败时返回错误信息。 |
 
 **示例：**
 
@@ -293,11 +274,9 @@ pixelMap.writePixels(area).then(() => {
 });
 ```
 
-## PixelMap.writePixels
+### writePixels
 
-```
-writePixels(area: PositionArea, callback: AsyncCallback<void>): void
-```
+writePixels(area: PositionArea, callback: AsyncCallback\<void>): void
 
 将指定的像素信息写入指定区域内。
 
@@ -308,7 +287,7 @@ writePixels(area: PositionArea, callback: AsyncCallback<void>): void
 | 参数名    | 类型                          | 必填 | 说明                           |
 | --------- | ----------------------------- | ---- | ------------------------------ |
 | area      | [PositionArea](#PositionArea) | 是   | 区域，根据区域写入。           |
-| callback: | AsyncCallback<void>           | 是   | 获取回调，失败时返回错误信息。 |
+| callback: | AsyncCallback\<void>          | 是   | 获取回调，失败时返回错误信息。 |
 
 **示例：**
 
@@ -323,11 +302,9 @@ pixelmap.writePixels(area, () => {
             })
 ```
 
-## PixelMap.writeBufferToPixels
+### writeBufferToPixels
 
-```
-writeBufferToPixels(src: ArrayBuffer): Promise<void>
-```
+writeBufferToPixels(src: ArrayBuffer): Promise\<void>
 
 将缓冲区的内容写入像素。
 
@@ -341,9 +318,9 @@ writeBufferToPixels(src: ArrayBuffer): Promise<void>
 
 **返回值：**
 
-| 类型          | 说明                                            |
-| ------------- | ----------------------------------------------- |
-| Promise<void> | Promise实例，用于获取结果，失败时返回错误信息。 |
+| 类型           | 说明                                            |
+| -------------- | ----------------------------------------------- |
+| Promise\<void> | Promise实例，用于获取结果，失败时返回错误信息。 |
 
 **示例：**
 
@@ -355,11 +332,9 @@ pixelMap.writeBufferToPixels(colorBuffer).then(() => {
 });
 ```
 
-## PixelMap.writeBufferToPixels
+### writeBufferToPixels
 
-```
-writeBufferToPixels(src: ArrayBuffer, callback: AsyncCallback<void>): void
-```
+writeBufferToPixels(src: ArrayBuffer, callback: AsyncCallback\<void>): void
 
 将缓冲区的内容写入像素。
 
@@ -367,10 +342,10 @@ writeBufferToPixels(src: ArrayBuffer, callback: AsyncCallback<void>): void
 
 **参数：**
 
-| 参数名   | 类型                | 必填 | 说明                           |
-| -------- | ------------------- | ---- | ------------------------------ |
-| src      | ArrayBuffer         | 是   | 图像像素数据。                 |
-| callback | AsyncCallback<void> | 是   | 获取回调，失败时返回错误信息。 |
+| 参数名   | 类型                 | 必填 | 说明                           |
+| -------- | -------------------- | ---- | ------------------------------ |
+| src      | ArrayBuffer          | 是   | 图像像素数据。                 |
+| callback | AsyncCallback\<void> | 是   | 获取回调，失败时返回错误信息。 |
 
 **示例：**
 
@@ -384,11 +359,9 @@ pixelMap.writeBufferToPixels(colorBuffer, function(err) {
 });
 ```
 
-## PixelMap.getImageInfo
+### getImageInfo
 
-```
-getImageInfo(): Promise<ImageInfo>
-```
+getImageInfo(): Promise\<ImageInfo>
 
 获取图像像素信息，使用Promise形式返回获取的图像像素信息。
 
@@ -396,9 +369,9 @@ getImageInfo(): Promise<ImageInfo>
 
 **返回值：**
 
-| 类型               | 说明                                                        |
-| ------------------ | ----------------------------------------------------------- |
-| Promise<ImageInfo> | Promise实例，用于异步获取图像像素信息，失败时返回错误信息。 |
+| 类型                | 说明                                                        |
+| ------------------- | ----------------------------------------------------------- |
+| Promise\<ImageInfo> | Promise实例，用于异步获取图像像素信息，失败时返回错误信息。 |
 
 **示例：**
 
@@ -410,11 +383,9 @@ pixelMap.getImageInfo().then(function(info) {
 });
 ```
 
-## PixelMap.getImageInfo
+### getImageInfo
 
-```
-getImageInfo(callback: AsyncCallback<ImageInfo>): void
-```
+getImageInfo(callback: AsyncCallback\<ImageInfo>): void
 
 获取图像像素信息，使用callback形式返回获取的图像像素信息。
 
@@ -422,9 +393,9 @@ getImageInfo(callback: AsyncCallback<ImageInfo>): void
 
 **参数：**
 
-| 参数名   | 类型                | 必填 | 说明                                                         |
-| -------- | ------------------- | ---- | ------------------------------------------------------------ |
-| callback | AsyncCallback<void> | 是   | 获取图像像素信息回调，异步返回图像像素信息，失败时返回错误信息。 |
+| 参数名   | 类型                      | 必填 | 说明                                                         |
+| -------- | ------------------------- | ---- | ------------------------------------------------------------ |
+| callback | AsyncCallback\<ImageInfo> | 是   | 获取图像像素信息回调，异步返回图像像素信息，失败时返回错误信息。 |
 
 **示例:**
 
@@ -444,11 +415,9 @@ pixelmap.getImageInfo((imageInfo) => {
             })
 ```
 
-## PixelMap.getBytesNumberPerRow
+### getBytesNumberPerRow
 
-```
-getBytesNumberPerRow(): Promise<number>
-```
+getBytesNumberPerRow(): Promise\<number>
 
 获取图像像素每行字节数。
 
@@ -456,9 +425,9 @@ getBytesNumberPerRow(): Promise<number>
 
 **返回值：**
 
-| 类型   | 说明                 |
-| ------ | -------------------- |
-| number | 图像像素的行字节数。 |
+| 类型             | 说明                                          |
+| ---------------- | --------------------------------------------- |
+| Promise\<number> | Promise实例，用于异步获取图像像素的行字节数。 |
 
 **示例：**
 
@@ -470,11 +439,9 @@ pixelmap.getBytesNumberPerRow().then((num) => {
         })
 ```
 
-## PixelMap.getBytesNumberPerRow
+### getBytesNumberPerRow
 
-```
-getBytesNumberPerRow(callback: AsyncCallback<number>): void
-```
+getBytesNumberPerRow(callback: AsyncCallback\<number>): void
 
 获取图像像素每行字节数。
 
@@ -482,9 +449,9 @@ getBytesNumberPerRow(callback: AsyncCallback<number>): void
 
 **参数：**
 
-| 参数名   | 类型                  | 必填 | 说明                 |
-| -------- | --------------------- | ---- | -------------------- |
-| callback | AsyncCallback<number> | 是   | 回调表示成功或失败。 |
+| 参数名   | 类型                   | 必填 | 说明               |
+| -------- | ---------------------- | ---- | ------------------ |
+| callback | AsyncCallback\<number> | 是   | 通过回调返回结果。 |
 
 **示例：**
 
@@ -496,11 +463,9 @@ pixelmap.getBytesNumberPerRow( num => {
         })
 ```
 
-## PixelMap.getPixelBytesNumber
+### getPixelBytesNumber
 
-```
-getPixelBytesNumber(): Promise<number>
-```
+getPixelBytesNumber(): Promise\<number>
 
 获取图像像素的总字节数。
 
@@ -508,9 +473,9 @@ getPixelBytesNumber(): Promise<number>
 
 **返回值：**
 
-| 类型   | 说明                 |
-| ------ | -------------------- |
-| number | 图像像素的总字节数。 |
+| 类型             | 说明                                          |
+| ---------------- | --------------------------------------------- |
+| Promise\<number> | Promise实例，用于异步获取图像像素的总字节数。 |
 
 **示例：**
 
@@ -522,11 +487,9 @@ pixelmap.getPixelBytesNumber().then((num) => {
         })
 ```
 
-## PixelMap.getPixelBytesNumber
+### getPixelBytesNumber
 
-```
-getPixelBytesNumber(callback: AsyncCallback<number>): void
-```
+getPixelBytesNumber(callback: AsyncCallback\<number>): void
 
 获取图像像素的总字节数。
 
@@ -534,9 +497,9 @@ getPixelBytesNumber(callback: AsyncCallback<number>): void
 
 **参数：**
 
-| 参数名   | 类型                  | 必填 | 说明                 |
-| -------- | --------------------- | ---- | -------------------- |
-| callback | AsyncCallback<number> | 是   | 回调表示成功或失败。 |
+| 参数名   | 类型                   | 必填 | 说明               |
+| -------- | ---------------------- | ---- | ------------------ |
+| callback | AsyncCallback\<number> | 是   | 通过回调返回结果。 |
 
 **示例：**
 
@@ -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<string> | 是   | 否   | 支持的图片格式，包括：png，jpeg，wbmp，bmp，gif，webp，heif等。<br/>**系统能力：** 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<ImageInfo>): void
-```
+图片源类，用于获取图片相关信息。在调用ImageSource的方法前，需要先通过createImageSource构建一个ImageSource实例。
+
+### 属性
+
+| 名称             | 类型           | 可读 | 可写 | 说明                                                         |
+| ---------------- | -------------- | ---- | ---- | ------------------------------------------------------------ |
+| supportedFormats | Array\<string> | 是   | 否   | 支持的图片格式，包括：png，jpeg，wbmp，bmp，gif，webp，heif等。<br/>**系统能力：** SystemCapability.Multimedia.Image |
+
+### getImageInfo
+
+getImageInfo(index: number, callback: AsyncCallback\<ImageInfo>): void
 
 获取指定序号的图片信息，使用callback形式返回图片信息。
 
@@ -726,11 +677,9 @@ it('TC_046', 0, async function (done) {
     })
 ```
 
-## ImageSource.getImageInfo
+### getImageInfo
 
-```
-getImageInfo(callback: AsyncCallback<ImageInfo>): void
-```
+getImageInfo(callback: AsyncCallback\<ImageInfo>): void
 
 获取指定序号的图片信息，使用callback形式返回图片信息。
 
@@ -752,11 +701,9 @@ imageSourceApi.getImageInfo(imageInfo => {
             })
 ```
 
-## ImageSource.getImageInfo
+### getImageInfo
 
-```
-getImageInfo(index?: number): Promise<ImageInfo>
-```
+getImageInfo(index?: number): Promise\<ImageInfo>
 
 获取图片信息，使用Promise形式返回图片信息。
 
@@ -770,9 +717,9 @@ getImageInfo(index?: number): Promise<ImageInfo>
 
 **返回值：**
 
-| 类型                    | 说明                   |
-| ----------------------- | ---------------------- |
-| [ImageInfo](#ImageInfo) | 返回获取到的图片信息。 |
+| 类型                              | 说明                   |
+| --------------------------------- | ---------------------- |
+| Promise\<[ImageInfo](#ImageInfo)> | 返回获取到的图片信息。 |
 
 **示例：**
 
@@ -785,11 +732,9 @@ imageSourceApi.getImageInfo(0)
             })
 ```
 
-##  ImageSource.getImageProperty
+### getImageProperty
 
-```
-getImageProperty(key:string, options?: GetImagePropertyOptions): Promise<string>
-```
+getImageProperty(key:string, options?: GetImagePropertyOptions): Promise\<string>
 
 获取图片中给定索引处图像的指定属性键的值。
 
@@ -804,9 +749,9 @@ getImageProperty(key:string, options?: GetImagePropertyOptions): Promise<string>
 
 **返回值：**
 
-| 类型            | 说明                                                         |
-| --------------- | ------------------------------------------------------------ |
-| Promise<string> | Promise实例，用于异步获取图片属性值，如获取失败则返回属性默认值。 |
+| 类型             | 说明                                                         |
+| ---------------- | ------------------------------------------------------------ |
+| Promise\<string> | Promise实例，用于异步获取图片属性值，如获取失败则返回属性默认值。 |
 
 **示例：**
 
@@ -814,11 +759,9 @@ getImageProperty(key:string, options?: GetImagePropertyOptions): Promise<string>
 const w = imageSourceApi.getImageProperty("ImageWidth")
 ```
 
-## ImageSource.getImageProperty
+### getImageProperty
 
-```
- getImageProperty(key:string, callback: AsyncCallback<string>): void
-```
+getImageProperty(key:string, callback: AsyncCallback\<string>): void
 
 获取图片中给定索引处图像的指定属性键的值，使用callback形式返回结果。
 
@@ -826,10 +769,10 @@ const w = imageSourceApi.getImageProperty("ImageWidth")
 
  **参数：**
 
-| 参数名   | 类型                  | 必填 | 说明                                                         |
-| -------- | --------------------- | ---- | ------------------------------------------------------------ |
-| key      | string                | 是   | 图片属性名。                                                 |
-| callback | AsyncCallback<string> | 是   | 获取图片属性回调，返回图片属性值，如获取失败则返回属性默认值。 |
+| 参数名   | 类型                   | 必填 | 说明                                                         |
+| -------- | ---------------------- | ---- | ------------------------------------------------------------ |
+| key      | string                 | 是   | 图片属性名。                                                 |
+| callback | AsyncCallback\<string> | 是   | 获取图片属性回调，返回图片属性值，如获取失败则返回属性默认值。 |
 
 **示例：**
 
@@ -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<string>): void
-```
+getImageProperty(key:string, options: GetImagePropertyOptions, callback: AsyncCallback\<string>): 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\<string>                              | 是   | 获取图片属性回调，返回图片属性值，如获取失败则返回属性默认值。 |
 
 **示例：**
 
@@ -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<void>
-```
+modifyImageProperty(key:string, value:string, options?: GetImagePropertyOptions): Promise\<void>
 
 修改属性的值。
 
@@ -884,6 +818,14 @@ modifyImageProperty(key:string, value:string, options?: GetImagePropertyOptions)
 | value   | string                                              | 是   | 属性值。                             |
 | options | [GetImagePropertyOptions](#GetImagePropertyOptions) | 是   | 图片属性，包括图片序号与默认属性值。 |
 
+**返回值：**
+
+| 类型           | 说明                        |
+| -------------- | --------------------------- |
+| Promise\<void> | Promise实例，异步返回结果。 |
+
+**示例：**
+
 **示例：**
 
 ```js
@@ -896,11 +838,9 @@ imageSourceApi.modifyImageProperty("ImageWidth", "abc")
             })
 ```
 
-## ImageSource.modifyImageProperty
+### modifyImageProperty
 
-```
-modifyImageProperty(key:string, value:string, callback: AsyncCallback<void>): void
-```
+modifyImageProperty(key:string, value:string, callback: AsyncCallback\<void>): void
 
 修改属性的值，callback返回结果。
 
@@ -908,11 +848,11 @@ modifyImageProperty(key:string, value:string, callback: AsyncCallback<void>): vo
 
 **参数：**
 
-| 参数名   | 类型                | 必填 | 说明                           |
-| -------- | ------------------- | ---- | ------------------------------ |
-| key      | string              | 是   | 图片属性名。                   |
-| value    | string              | 是   | 属性值。                       |
-| callback | AsyncCallback<void> | 是   | 修改属性值，callback返回结果。 |
+| 参数名   | 类型                 | 必填 | 说明                           |
+| -------- | -------------------- | ---- | ------------------------------ |
+| key      | string               | 是   | 图片属性名。                   |
+| value    | string               | 是   | 属性值。                       |
+| callback | AsyncCallback\<void> | 是   | 修改属性值，callback返回结果。 |
 
 **示例：**
 
@@ -920,11 +860,9 @@ modifyImageProperty(key:string, value:string, callback: AsyncCallback<void>): vo
 imageSourceApi.modifyImageProperty("ImageWidth", "abc",() => {})
 ```
 
-## ImageSource.modifyImageProperty
+### modifyImageProperty
 
-```
-modifyImageProperty(key:string, value:string, options: GetImagePropertyOptions,callback: AsyncCallback<void>): void
-```
+modifyImageProperty(key:string, value:string, options: GetImagePropertyOptions,callback: AsyncCallback\<void>): void
 
 修改属性的值，callback返回结果。
 
@@ -937,7 +875,7 @@ modifyImageProperty(key:string, value:string, options: GetImagePropertyOptions,c
 | key      | string                                              | 是   | 图片属性名。                         |
 | value    | string                                              | 是   | 属性值。                             |
 | options  | [GetImagePropertyOptions](#GetImagePropertyOptions) | 是   | 图片属性，包括图片序号与默认属性值。 |
-| callback | AsyncCallback<void>                                 | 是   | 修改属性值，callback返回结果。       |
+| callback | AsyncCallback\<void>                                | 是   | 修改属性值，callback返回结果。       |
 
 **示例：**
 
@@ -950,11 +888,9 @@ imageSourceApi.modifyImageProperty("ImageWidth", "abc",PropertyOptions,() => {
                 };
 ```
 
-## ImageSource.createPixelMap
+### createPixelMap
 
-```
-createPixelMap(index: number, options: DecodingOptions, callback: AsyncCallback<PixelMap>): void
-```
+createPixelMap(index: number, options: DecodingOptions, callback: AsyncCallback\<PixelMap>): void
 
 通过图片解码参数创建pixelmap对象，使用callback形式返回结果。
 
@@ -978,11 +914,9 @@ imageSourceApi.createPixelMap().then(pixelmap => {
             })
 ```
 
-## ImageSource.createPixelMap
+### createPixelMap
 
-```
-createPixelMap(options: DecodingOptions, callback: AsyncCallback<PixelMap>): void
-```
+createPixelMap(options: DecodingOptions, callback: AsyncCallback\<PixelMap>): void
 
 通过图片解码参数创建pixelmap对象。
 
@@ -1013,11 +947,9 @@ let decodingOptions = {
             })
 ```
 
-## ImageSource.createPixelMap
+### createPixelMap
 
-```
-createPixelMap(opts: DecodingOptions, callback: AsyncCallback<PixelMap>): void
-```
+createPixelMap(opts: DecodingOptions, callback: AsyncCallback\<PixelMap>): void
 
 通过图片解码参数创建pixelmap对象。
 
@@ -1049,11 +981,9 @@ let decodingOptions = {
             })
 ```
 
-## ImageSource.updateData
+### updateData
 
-```
-updateData(data: Array<number>, isFinal: boolean, offset: number, length: number, callback: AsyncCallback<boolean>): void
-```
+updateData(data: Array\<number>, isFinal: boolean, offset: number, length: number, callback: AsyncCallback\<boolean>): void
 
 更新增量数据。
 
@@ -1061,13 +991,13 @@ updateData(data: Array<number>, isFinal: boolean, offset: number, length: number
 
 **参数：**
 
-| 名称     | 类型                   | 必填 | 说明                 |
-| -------- | ---------------------- | ---- | -------------------- |
-| data     | Array<number>          | 是   | 增量数据。           |
-| isFinal  | boolean                | 是   | 是否更新完。         |
-| offset   | number                 | 是   | 偏移量。             |
-| length   | number                 | 是   | 数组长。             |
-| callback | AsyncCallback<boolean> | 是   | 回调表示成功或失败。 |
+| 名称     | 类型                    | 必填 | 说明                 |
+| -------- | ----------------------- | ---- | -------------------- |
+| data     | Array\<number>          | 是   | 增量数据。           |
+| isFinal  | boolean                 | 是   | 是否更新完。         |
+| offset   | number                  | 是   | 偏移量。             |
+| length   | number                  | 是   | 数组长。             |
+| callback | AsyncCallback\<boolean> | 是   | 回调表示成功或失败。 |
 
 **示例：**
 
@@ -1080,11 +1010,9 @@ imageSourceIncrementalSApi.updateData(array, false, 0, 10,(error,data )=> {
             }
 ```
 
-## ImageSource.updateData
+### updateData
 
-```
-updateData(data: Array<number>, isFinal: boolean, offset?: number, length?: number): Promise<boolean>
-```
+updateData(data: Array\<number>, isFinal: boolean, offset?: number, length?: number): Promise\<boolean>
 
 更新增量数据。
 
@@ -1092,12 +1020,18 @@ updateData(data: Array<number>, isFinal: boolean, offset?: number, length?: numb
 
 **参数：**
 
-| 名称    | 类型          | 必填 | 说明         |
-| ------- | ------------- | ---- | ------------ |
-| data    | Array<number> | 是   | 增量数据。   |
-| isFinal | boolean       | 是   | 是否更新完。 |
-| offset  | boolean       | 否   | 偏移量。     |
-| length  | number        | 否   | 数组长。     |
+| 名称    | 类型           | 必填 | 说明         |
+| ------- | -------------- | ---- | ------------ |
+| data    | Array\<number> | 是   | 增量数据。   |
+| isFinal | boolean        | 是   | 是否更新完。 |
+| offset  | boolean        | 否   | 偏移量。     |
+| length  | number         | 否   | 数组长。     |
+
+**返回值：**
+
+| 类型              | 说明                              |
+| ----------------- | --------------------------------- |
+| Promise\<boolean> | Promise实例，异步返回成功或失败。 |
 
 **示例：**
 
@@ -1109,11 +1043,9 @@ updateData(data: Array<number>, isFinal: boolean, offset?: number, length?: numb
         })
 ```
 
-## ImageSource.updateData
+### updateData
 
-```
-updateData(data: Array<number>, isFinal: boolean, callback: AsyncCallback<boolean>): void
-```
+updateData(data: Array\<number>, isFinal: boolean, callback: AsyncCallback\<boolean>): void
 
 更新增量数据。
 
@@ -1121,11 +1053,11 @@ updateData(data: Array<number>, isFinal: boolean, callback: AsyncCallback<boolea
 
 **参数：**
 
-| 名称     | 类型                   | 必填 | 说明                 |
-| -------- | ---------------------- | ---- | -------------------- |
-| data     | Array<number>          | 是   | 增量数据。           |
-| isFinal  | boolean                | 是   | 是否更新完。         |
-| callback | AsyncCallback<boolean> | 是   | 回调表示成功或失败。 |
+| 名称     | 类型                    | 必填 | 说明                 |
+| -------- | ----------------------- | ---- | -------------------- |
+| data     | Array\<number>          | 是   | 增量数据。           |
+| isFinal  | boolean                 | 是   | 是否更新完。         |
+| callback | AsyncCallback\<boolean> | 是   | 回调表示成功或失败。 |
 
 **示例：**
 
@@ -1138,11 +1070,9 @@ imageSourceIncrementalSApi.updateData(array, false,(error,data) => {
             }      
 ```
 
-## ImageSource.release
+### release
 
-```
-release(callback: AsyncCallback<void>): void
-```
+release(callback: AsyncCallback\<void>): void
 
 释放图片源。
 
@@ -1150,9 +1080,9 @@ release(callback: AsyncCallback<void>): void
 
 **参数：**
 
-| 名称     | 类型                | 必填 | 说明                               |
-| -------- | ------------------- | ---- | ---------------------------------- |
-| callback | AsyncCallback<void> | 是   | 资源释放回调，失败时返回错误信息。 |
+| 名称     | 类型                 | 必填 | 说明                               |
+| -------- | -------------------- | ---- | ---------------------------------- |
+| callback | AsyncCallback\<void> | 是   | 资源释放回调，失败时返回错误信息。 |
 
 **示例：**
 
@@ -1165,16 +1095,20 @@ imageSourceApi.release(() => {
         }
 ```
 
-## ImageSource.release
+### release
 
-```
-release(): Promise<void>
-```
+release(): Promise\<void>
 
 释放图片源。
 
 **系统能力：** SystemCapability.Multimedia.Image
 
+**返回值：**
+
+| 类型           | 说明                        |
+| -------------- | --------------------------- |
+| Promise\<void> | Promise实例，异步返回结果。 |
+
 **示例：**
 
 ```js
@@ -1185,21 +1119,9 @@ release(): Promise<void>
             })
 ```
 
-## ImagePacker
-
-图片打包器类，用于图片压缩和打包。在调用ImagePacker的方法前，需要先通过createImagePacker构建一个ImagePacker实例。
-
-**属性**
+## image.createImagePacker
 
-| 名称             | 类型          | 可读 | 可写 | 说明                                                         |
-| ---------------- | ------------- | ---- | ---- | ------------------------------------------------------------ |
-| supportedFormats | Array<string> | 是   | 否   | 图片打包支持的格式，jpg。<br/>**系统能力：** 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<Array<number>>): void
-```
+### 属性
+
+| 名称             | 类型           | 可读 | 可写 | 说明                                                         |
+| ---------------- | -------------- | ---- | ---- | ------------------------------------------------------------ |
+| supportedFormats | Array\<string> | 是   | 否   | 图片打包支持的格式，jpg。<br/>**系统能力：** SystemCapability.Multimedia.Image |
+
+### packing
+
+packing(source: ImageSource, option: PackingOption, callback: AsyncCallback<Array\<number>>): void
 
 图片压缩或重新打包，使用callback形式返回结果。
 
@@ -1233,7 +1163,7 @@ packing(source: ImageSource, option: PackingOption, callback: AsyncCallback<Arra
 | -------- | ------------------------------- | ---- | ---------------------------------- |
 | source   | [ImageSource](#ImageSource)     | 是   | 打包的图片源。                     |
 | option   | [PackingOption](#PackingOption) | 是   | 设置打包参数。                     |
-| callback | AsyncCallback<Array<number>>    | 是   | 获取图片打包回调，返回打包后数据。 |
+| callback | AsyncCallback<Array\<number>>   | 是   | 获取图片打包回调，返回打包后数据。 |
 
 **示例：**
 
@@ -1246,11 +1176,9 @@ let packOpts = { format:["image/jpeg"], quality:98 }
                 })
 ```
 
-## ImagePacker.packing
+### packing
 
-```
-packing(source: ImageSource, option: PackingOption): Promise<Array<number>>
-```
+packing(source: ImageSource, option: PackingOption): Promise<Array\<number>>
 
 图片压缩或重新打包，使用promise形式返回结果。
 
@@ -1265,9 +1193,9 @@ packing(source: ImageSource, option: PackingOption): Promise<Array<number>>
 
 **返回值：**
 
-| 类型                 | 说明                                          |
-| :------------------- | :-------------------------------------------- |
-| Promise<ArrayBuffer> | Promise实例，用于异步获取压缩或打包后的数据。 |
+| 类型                    | 说明                                          |
+| :---------------------- | :-------------------------------------------- |
+| Promise<Array\<number>> | Promise实例，用于异步获取压缩或打包后的数据。 |
 
 **示例：**
 
@@ -1281,11 +1209,9 @@ let packOpts = { format:["image/jpeg"], quality:98 }
                 })
 ```
 
-## ImagePacker.release
+### release
 
-```
-release(callback: AsyncCallback<void>): void
-```
+release(callback: AsyncCallback\<void>): void
 
 释放packer对象。
 
@@ -1293,9 +1219,9 @@ release(callback: AsyncCallback<void>): void
 
 **参数：**
 
-| 参数名   | 类型                | 必填 | 说明                   |
-| -------- | ------------------- | ---- | ---------------------- |
-| callback | AsyncCallback<void> | 是   | 回调表示成功还是失败。 |
+| 参数名   | 类型                 | 必填 | 说明                   |
+| -------- | -------------------- | ---- | ---------------------- |
+| callback | AsyncCallback\<void> | 是   | 回调表示成功还是失败。 |
 
 **示例：**
 
@@ -1306,16 +1232,20 @@ imagePackerApi.release(()=>{
             done();
 ```
 
-## ImagePacker.release
+### release
 
-```
-release(): Promise<void>
-```
+release(): Promise\<void>
 
 释放packer对象。
 
 **系统能力：** SystemCapability.Multimedia.Image
 
+**返回值：**
+
+| 类型           | 说明                            |
+| :------------- | :------------------------------ |
+| Promise\<void> | Promise实例，用于异步返回结果。 |
+
 **示例：**
 
 ```js
@@ -1327,8 +1257,6 @@ imagePackerApi.release();
 
 ## PositionArea<a name="PositionArea"></a>
 
-**属性：**
-
 | 名称   | 类型              | 可读 | 可写 | 说明                                                         |
 | ------ | ----------------- | ---- | ---- | ------------------------------------------------------------ |
 | pixels | ArrayBuffer       | 是   | 否   | 像素。<br>**系统能力：** SystemCapability.Multimedia.Image   |
@@ -1338,8 +1266,6 @@ imagePackerApi.release();
 
 ## **ImageInfo<a name="ImageInfo"></a>**
 
-**属性：**
-
 | 名称        | 类型                              | 可读 | 可写 | 说明                                                         |
 | ----------- | --------------------------------- | ---- | ---- | ------------------------------------------------------------ |
 | size        | [Size](#Size)                     | 是   | 是   | 图片大小。<br/>**系统能力：** SystemCapability.Multimedia.Image |
@@ -1349,8 +1275,6 @@ imagePackerApi.release();
 
 ## Size<a name="Size"></a>
 
-**属性：**
-
 | 名称   | 类型   | 可读 | 可写 | 说明                                                         |
 | ------ | ------ | ---- | ---- | ------------------------------------------------------------ |
 | height | number | 是   | 是   | 输出图片的高。<br/>**系统能力：** SystemCapability.Multimedia.Image |
@@ -1412,8 +1336,6 @@ imagePackerApi.release();
 
 ## InitializationOptions<a name="InitializationOptions"></a>
 
-**属性：**
-
 | 名称        | 类型                              | 可读 | 可写 | 说明                                                         |
 | ----------- | --------------------------------- | ---- | ---- | ------------------------------------------------------------ |
 | alphaType   | [AlphaType](#AlphaType)           | 是   | 是   | 透明度。<br/>**系统能力：** SystemCapability.Multimedia.Image |
@@ -1426,8 +1348,6 @@ imagePackerApi.release();
 
 解码设置选项。
 
-**属性：**
-
 | 名称               | 类型                              | 可读 | 可写 | 说明                                                         |
 | ------------------ | --------------------------------- | ---- | ---- | ------------------------------------------------------------ |
 | sampleSize         | number                            | 是   | 是   | 缩略图采样大小。<br/>**系统能力：** SystemCapability.Multimedia.Image |
@@ -1440,8 +1360,6 @@ imagePackerApi.release();
 
 ## Region<a name="Region"></a>
 
-**属性：**
-
 | 名称 | 类型          | 可读 | 可写 | 说明                                                         |
 | ---- | ------------- | ---- | ---- | ------------------------------------------------------------ |
 | size | [Size](#Size) | 是   | 是   | 区域大小。<br/>**系统能力：** SystemCapability.Multimedia.Image |
@@ -1450,8 +1368,6 @@ imagePackerApi.release();
 
 ## PackingOption<a name="PackingOption"></a>
 
-**属性：**
-
 | 名称    | 类型   | 可读 | 可写 | 说明                                                         |
 | ------- | ------ | ---- | ---- | ------------------------------------------------------------ |
 | format  | string | 是   | 是   | 目标格式。<br/>**系统能力：** SystemCapability.Multimedia.Image |
@@ -1459,12 +1375,8 @@ imagePackerApi.release();
 
 ## GetImagePropertyOptions<a name="GetImagePropertyOptions"></a>
 
-**属性：**
-
 | 名称         | 类型   | 可读 | 可写 | 说明       |
 | ------------ | ------ | ---- | ---- | ---------- |
 | index        | number | 是   | 是   | 图片序号。<br/>**系统能力：** SystemCapability.Multimedia.Image |
 | defaultValue | string | 是   | 是   | 默认属性值<br/>**系统能力：** SystemCapability.Multimedia.Image |
 
------
-

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%')
     }
   }
   ```
-
+  
   ![zh-cn_image_0000001194192440](figures/zh-cn_image_0000001194192440.png)
 
 
@@ -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%')
     }
   }
   ```
-
+  
   ![zh-cn_image_0000001194032462](figures/zh-cn_image_0000001194032462.png)
 
 

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)
           })
       }

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)

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)

zh-cn/application-dev/security/hapsigntool-guidelines.md

-# 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。
 
- 
+
 **<p id="生成应用签名证书密钥对">1.生成应用签名证书密钥对</p>**
- 
+
 调用密钥对生成接口，生成签名密钥并保存到密钥库。
 
 命令实例：
@@ -259,7 +259,7 @@ java -jar hap-sign-tool.jar generate-keypair -keyAlias "oh-app1-key-v1" -keyAlg
   > ![icon-note.gif](../public_sys-resources/icon-note.gif) **说明：**请记录下**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           #密钥口令，可选项，该参数不填默认生成的密钥对无口令
-    
+
 
 
 **<p id="生成应用签名证书">2.生成应用签名证书</p>**
@@ -353,6 +353,7 @@ java -jar hap-sign-tool.jar sign-app -keyAlias "oh-app1-key-v1" -signAlg "SHA256
 
  
 
+
 ## 常见问题
 
 **1.执行[生成应用签名证书](#生成应用签名证书)命令时，控制台打印结果，无文件输出**

zh-cn/application-dev/security/huks-guidelinest.md → zh-cn/application-dev/security/huks-guidelines.md

-# HUKS开发指南
-
-## 场景介绍
-
- HUKS（OpenHarmony Universal KeyStore，OpenHarmony通用密钥库系统）向应用提供密钥库能力，包括密钥管理及密钥的密码学操作等功能。HUKS所管理的密钥可以由应用导入或者由应用调用HUKS接口生成。 
-
-
-## 接口说明
-
-| 接口名                                                       | 描述             |
-| ------------------------------------------------------------ | ---------------- |
-| function generateKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HksResult>) : void; | 生成密钥/密钥对  |
-| function generateKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>; | 生成密钥/密钥对  |
-| function exportKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void; | 导出公钥         |
-| function exportKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>; | 导出公钥         |
-| function isKeyExist(keyAlias: string, options: HuksOptions, callback: AsyncCallback<boolean>) : void; | 查询密钥是否存在 |
-| function isKeyExist(keyAlias: string, options: HuksOptions) : Promise<boolean>; | 查询密钥是否存在 |
-| function deleteKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void; | 删除密钥         |
-| function deleteKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>; | 删除密钥         |
-
-## 开发步骤
-
-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<HksResult>) : void; | 生成密钥/密钥对  |
+| function generateKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>; | 生成密钥/密钥对  |
+| function exportKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void; | 导出公钥         |
+| function exportKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>; | 导出公钥         |
+| function isKeyExist(keyAlias: string, options: HuksOptions, callback: AsyncCallback<boolean>) : void; | 查询密钥是否存在 |
+| function isKeyExist(keyAlias: string, options: HuksOptions) : Promise<boolean>; | 查询密钥是否存在 |
+| function deleteKey(keyAlias: string, options: HuksOptions, callback: AsyncCallback<HuksResult>) : void; | 删除密钥         |
+| function deleteKey(keyAlias: string, options: HuksOptions) : Promise<HuksResult>; | 删除密钥         |
+
+## 开发步骤
+
+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){}); 
+   ```
+
+
+

zh-cn/application-dev/webgl/Readme-CN.md

+# WebGL
+
+- [概述](webgl-overview.md)
+- [WebGL开发指导](webgl-guidelines.md)

zh-cn/application-dev/webgl/webgl-guidelines.md

+# 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图形和着色器绘制彩色三角形的两个场景示例及开发过程。
+
+> ![icon-note.gif](public_sys-resources/icon-note.gif) **说明：**
+> 使用WebGL开发时，为保证界面图形显示效果，请使用真机运行。
+
+
+### 无着色器绘制2D图形
+
+此场景为未使用WebGL绘制的2D图形（CPU绘制非GPU绘制）。开发示例如下：
+
+1. 创建页面布局。index.hml示例如下：
+   ```
+   <div class="container">
+       <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
+       <button class="btn-button" onclick="BtnDraw2D">BtnDraw2D</button>
+   </div>
+   ```
+
+2. 设置页面样式。index.css示例如下：
+   ```
+   .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. 编辑JavaScript代码文件，增加2D绘制逻辑代码。index.js示例如下：
+   ```
+   //index.js
+   export default {//NAPI交互代码
+       data: {
+           title: "DEMO BY TEAMOL",
+           fit:"cover",
+           fits: ["cover", "contain", "fill", "none", "scale-down"]
+       },
+       onInit() {
+           this.title = this.$t('strings.world');
+       },
+       BtnDraw2D(){
+           // 获取canvas元素
+           const canvas = this.$refs.canvas1;
+           // 获取2D上下文
+           const ctx = canvas.getContext('2d');
+   
+           //执行CPU绘制函数
+           // Set 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();
+       }
+   }
+   ```
+
+**图1** 点击按钮绘制2D图形的效果图
+
+![zh-cn_image_0000001192269746](figures/zh-cn_image_0000001192269746.gif)
+
+
+### 着色器绘制彩色三角形
+
+此场景为使用WebGL绘制的彩色三角形图形（GPU绘制）。开发示例如下：
+
+
+1. 创建页面布局。index.hml示例如下：
+   ```
+   <div class="container">
+   <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
+   <button class="btn-button" onclick="BtnColorTriangle">BtnColorTriangle</button>
+   </div>
+   ```
+
+2. 设置页面样式。index.css示例如下：
+   ```
+   .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. 编辑JavaScript代码文件，增加彩色三角形绘制逻辑代码。index.js示例如下：
+   ```
+   //index.js
+   import webgl from "@ohos.webglnapi";//导入WebGL模块
+   
+   //WebGL相关预定义
+   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
+   }
+   
+   // 顶点着色器程序
+   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';
+   
+   // 片元着色器程序
+   var FSHADER_SOURCE =
+       'precision mediump float;\n' +
+       'varying vec4 v_Color;\n' +
+       'void main() {\n' +
+       '  gl_FragColor = v_Color;\n' +
+       '}\n';
+   
+   function initVertexBuffers(gl) {
+       // 顶点坐标和颜色
+       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; // 点的个数
+       var FSIZE = verticesColors.BYTES_PER_ELEMENT; //数组中每个元素的字节数
+   
+       // 创建缓冲区对象
+       var vertexBuffer = gl.createBuffer();
+       if (!vertexBuffer) {
+           console.log('Failed to create the buffer object');
+           return -1;
+       }
+   
+       // 将缓冲区对象绑定到目标
+       gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
+       // 向缓冲区对象写入数据
+       gl.bufferData(gl.ARRAY_BUFFER, verticesColors.buffer, gl.STATIC_DRAW);
+   
+       //获取着色器中attribute变量a_Position的地址
+       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;
+       }
+       // 将缓冲区对象分配给a_Position变量
+       gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 5 * FSIZE, 0);
+   
+       // 连接a_Position变量与分配给它的缓冲区对象
+       gl.enableVertexAttribArray(a_Position);
+   
+       //获取着色器中attribute变量a_Color的地址
+       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;
+       }
+       // 将缓冲区对象分配给a_Color变量
+       gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, FSIZE * 5, FSIZE * 2);
+   
+       // 连接a_Color变量与分配给它的缓冲区对象
+       gl.enableVertexAttribArray(a_Color);
+   
+       // 解除绑定
+       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() {
+           // 获取canvas元素
+           const el = this.$refs.canvas1;
+           // 获取webgl上下文
+           var gl = el.getContext('webgl');
+   
+           if (!gl) {
+               console.log('Failed to get the rendering context for WebGL');
+               return;
+           }
+   
+           // 初始化着色器
+           if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
+               console.log('Failed to intialize shaders.');
+               return;
+           }
+   
+           // 设置顶点位置
+           var n = initVertexBuffers(gl);
+           if (n < 0) {
+               console.log('Failed to set the positions of the vertices');
+               return;
+           }
+   
+           // 指定清空<canvas>的颜色
+           gl.clearColor(0.0, 0.0, 0.0, 1.0);
+   
+           // 清空<canvas>
+           gl.clear(gl.COLOR_BUFFER_BIT);
+   
+           // 绘制三角形
+           gl.drawArrays(gl.TRIANGLES, 0, n);
+   
+           //清buffer
+           gl.flush();
+       }
+   }
+   ```
+
+
+**图2** 点击按钮绘制彩色三角形的效果图
+
+![zh-cn_image_0000001192429306](figures/zh-cn_image_0000001192429306.gif)

zh-cn/application-dev/webgl/webgl-overview.md

+# 概述
+
+WebGL的全称为Web Graphic Library(网页图形库)，主要用于交互式渲染2D图形和3D图形。目前OpenHarmony中使用的WebGL是基于OpenGL裁剪的OpenGL ES，可以在HTML5的canvas元素对象中使用，无需使用插件，支持跨平台。WebGL程序是由JavaScript代码组成的，其中使用的API可以利用用户设备提供的GPU硬件完成图形渲染和加速。
+
+
+## 基本概念
+
+
+### 着色器
+
+可以理解为运行在显卡中的指令和数据。在WebGL中，着色器是用OpenGL ES着色语言(GLSL)编写的。
+
+完整的着色器包括顶点着色器和片元着色器。顶点着色器和片元着色器的交互则涉及到图片光栅化。
+
+- 顶点着色器：最基本的任务是接收三维空间中点的坐标，将其处理为二维空间中的坐标并输出。
+
+- 片元着色器：最基本的任务是对需要处理的屏幕上的每个像素输出一个颜色值。
+
+- 图片光栅化：将顶点着色器输出的二维空间中的点坐标，转化为需要处理的像素并传递给片元着色器的过程。
+
+
+### 缓冲区
+
+驻存于内存中的JavaScript对象，存储着即将推送到着色器中的attribute对象。
+
+
+### 着色器程序
+
+将缓冲区中的数据推送到着色器中还需涉及“着色器程序”，一个负责关联着色器和缓冲区的JavaScript对象。一个WebGLProgram 对象由两个编译过后的 WebGLShader 组成，即顶点着色器和片段着色器（均由 GLSL 语言所写）。
+
+
+## 运作机制
+
+**图1** WebGL运作机制
+
+![zh-cn_image_0000001238544451](figures/zh-cn_image_0000001238544451.png)
+
+
+- 应用前端HTML5绘制界面组件。
+
+- Native API完成前端JavaScript与C++代码交互。
+
+- QuickJS与V8为图形框架，为WebGL模块提供绘制对象Surface。
+
+- WebGL模块对外暴露OpenGL ES的GPU绘制接口。
+
+- 中间接口层EGL（Embedded Graphics Library）完成不同平台的适配。