diff --git a/zh-cn/application-dev/quick-start/arkts-state-mgmt-page-level.md b/zh-cn/application-dev/quick-start/arkts-state-mgmt-page-level.md
index 959f924a34bbe7fd48ded0a20c3b38178b323035..571ef6a60ab885b5581aa0257ee91bb3668eb195 100644
--- a/zh-cn/application-dev/quick-start/arkts-state-mgmt-page-level.md
+++ b/zh-cn/application-dev/quick-start/arkts-state-mgmt-page-level.md
@@ -468,6 +468,10 @@ struct CompC {
 
 装饰器@State、@Prop、@Link、@ObjectLink、@Provide、@Consume、@StorageProp以及@StorageLink所装饰的变量均可以通过@Watch监听其变化。
 
+> **说明：**
+>
+> 深层次数据修改不会触发@Watch回调，例如无法监听数组中对象值的改变。
+
 ```ts
 // xxx.ets
 @Entry
diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284934.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284934.gif
deleted file mode 100644
index 6168a14aa67c866abf6185ba3a3c2ae9f595153c..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001127284934.gif and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001176075554.gif b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001176075554.gif
new file mode 100644
index 0000000000000000000000000000000000000000..16e7ff213bd5caf5a9802001d3ced2996c66e0bc
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-js/figures/zh-cn_image_0000001176075554.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md
index 1bf885a86bb1120ccb2819a402aadac3c7b01ec5..8e8894ff6e0c33cbd3681f8ee9b174bcc1f5f943 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-marquee.md
@@ -64,74 +64,77 @@
 
 ```html
 <!-- xxx.hml -->
-<div class="container">
-  <marquee id="customMarquee" class="customMarquee" scrollamount="{{scrollAmount}}" loop="{{loop}}"direction="{{marqueeDir}}"
-    onbounce="onMarqueeBounce" onstart="onMarqueeStart" onfinish="onMarqueeFinish">{{marqueeCustomData}}</marquee>
-  <div class="content">
-    <button class="controlButton" onclick="onStartClick">Start</button>
-    <button class="controlButton" onclick="onStopClick">Stop</button>
+<div class="tutorial-page">
+  <div class="mymarquee">
+    <marquee  style="color: {{color1}}" loop="{{loopval}}" scrollamount="{{scroll}}" direction="{{isleft}}" class="marqueetext" 
+    id="testmarquee" onfinish="setfinish">
+      Life is a journey, not the destination.
+    </marquee>
+  </div>
+  <div style="width: 600px;height: 150px;flex-direction: row;justify-content: space-around;">
+    <button onclick="makestart"  value="start"></button>
+    <button onclick="makestop" value="stop"></button>
   </div>
 </div>
 ```
 
 ```css
 /* xxx.css */
-.container {
+.tutorial-page {
+  width: 750px;
+  height: 100%;
   flex-direction: column;
-  justify-content: center;
   align-items: center;
-  background-color: #ffffff;
+  justify-content: center;
 }
-.customMarquee {
-  width: 100%;
-  height: 80px;
-  padding: 10px;
-  margin: 20px;
-  border: 4px solid #ff8888;
-  border-radius: 20px;
-  font-size: 40px;
-  color: #ff8888;
-  font-weight: bolder;
-  font-family: serif;
-  background-color: #ffdddd;
+.marqueetext {
+  font-size: 37px;
 }
-.content {
-  flex-direction: row;
+.mymarquee {
+  margin-top: 20px;
+  width:100%;
+  height: 100px;
+  margin-left: 50px;
+  margin-right: 50px;
+  border: 1px solid #dc0f27;
+  border-radius: 15px;
+  align-items: center;
 }
-.controlButton {
-  flex-grow: 1;
-  background-color: #F2F2F2;
-  text-color: #0D81F2;
+button{
+  width: 200px;
+  height: 80px;
+  margin-top: 100px;
 }
 ```
 
 ```js
 // xxx.js
 export default {
-  data: {
-    scrollAmount: 30,
-    loop: 3,
-    marqueeDir: 'left',
-    marqueeCustomData: 'Custom marquee',
-  },
-  onMarqueeBounce: function() {
-    console.log("onMarqueeBounce");
+  private: {
+    loopval: 1,
+    scroll: 8,
+    color1: 'red'
   },
-  onMarqueeStart: function() {
-    console.log("onMarqueeStart");
+  onInit(){
   },
-  onMarqueeFinish: function() {
-    console.log("onMarqueeFinish");
+  setfinish(e) {
+    this.loopval=  this.loopval + 1,
+    this.r = Math.floor(Math.random()*255),
+    this.g = Math.floor(Math.random()*255),
+    this.b = Math.floor(Math.random()*255),
+    this.color1 = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)',
+    this.$element('testmarquee').start(),
+    this.loopval=  this.loopval - 1
   },
-  onStartClick (evt) {
-    this.$element('customMarquee').start();
+  makestart(e) {
+    this.$element('testmarquee').start()
   },
-  onStopClick (evt) {
-    this.$element('customMarquee').stop();
+  makestop(e) {
+    this.$element('testmarquee').stop()
   }
 }
 ```
 
-![zh-cn_image_0000001127284934](figures/zh-cn_image_0000001127284934.gif)
+![zh-cn_image_0000001176075554](figures/zh-cn_image_0000001176075554.gif)
 
 
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md
index 3c38f3db2dc824e700b7488b53373b5a83bc7ae1..ae142ab4eef9c42886d9cf1d52b2f12571376f8a 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-basic-picker.md
@@ -165,52 +165,59 @@
 ```html
 <!-- xxx.hml -->
 <div class="container">
-  <select @change="selectChange">
+    <select @change="selectChange">
         <option value="{{ item }}" for="item in selectList">
             {{ item }}
         </option>
-  </select>
-  <picker id="picker0" type="text" value="{{textvalue}}" selected="{{textselect}}" range="{{rangetext}}" onchange="textonchange"
-    oncancel="textoncancel" class="pickertext"></picker>
-
-  <picker id="picker1" type="date" value="{{datevalue}}" start="2002-2-5" end="2030-6-5" selected="{{dateselect}}" lunarswitch="true"
-    onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
-
-  <picker id="picker2" type="time" value="{{timevalue}}" containsecond="{{containsecond}}" selected="{{timeselect}}" hours="12"
-    onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
-
-  <picker id="picker3" type="datetime" value="{{datetimevalue}}" selected="{{datetimeselect}}" hours="24" lunarswitch="true"
-    onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
-
-  <picker id="picker4" type="multi-text" value="{{multitextvalue}}" columns="3" range="{{multitext}}" selected="{{multitextselect}}"
-    onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
+    </select>
+    <picker id="picker0" type="text" value="{{ textvalue }}" selected="{{ textselect }}" range="{{ rangetext }}"
+            onchange="textonchange"
+            oncancel="textoncancel" class="pickertext" show="false"></picker>
+
+    <picker id="picker1" type="date" value="{{ datevalue }}" start="2002-2-5" end="2030-6-5" selected="{{ dateselect }}"
+            lunarswitch="true"
+            onchange="dateonchange" oncancel="dateoncancel" class="pickerdate" show="false"></picker>
+
+    <picker id="picker2" type="time" value="{{ timevalue }}" containsecond="{{ containsecond }}"
+            selected="{{ timeselect }}" hours="12"
+            onchange="timeonchange" oncancel="timeoncancel" class="pickertime" show="false"></picker>
+
+    <picker id="picker3" type="datetime" value="{{ datetimevalue }}" selected="{{ datetimeselect }}" hours="24"
+            lunarswitch="true"
+            onchange="datetimeonchange" oncancel="datetimeoncancel" class="pickerdatetime" show="false"></picker>
+
+    <picker id="picker4" type="multi-text" value="{{ multitextvalue }}" columns="3" range="{{ multitext }}"
+            selected="{{ multitextselect }}"
+            onchange="multitextonchange" oncancel="multitextoncancel" class="pickermuitl" show="false"></picker>
 </div>
 ```
 
 ```css
 /* xxx.css */
-.container {    
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+.container {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
- picker{
-  width:60%;
-  height:80px;
-  border-radius:20px;
-  text-color:white;
-  font-size:15px;
-  background-color:#4747e3;
-  margin-left:20%;
+
+picker {
+    width: 60%;
+    height: 80px;
+    border-radius: 20px;
+    text-color: white;
+    font-size: 15px;
+    background-color: #4747e3;
+    margin-left: 20%;
 }
- select{
-  background-color: #efecec;
-  height: 50px;
-  width: 60%;
-  margin-left: 20%;
-  margin-top: 300px;
-  margin-bottom: 50px;
-  font-size: 22px;
+
+select {
+    background-color: #efecec;
+    height: 50px;
+    width: 60%;
+    margin-left: 20%;
+    margin-top: 300px;
+    margin-bottom: 50px;
+    font-size: 22px;
 }
 ```
 
@@ -218,72 +225,96 @@
 // xxx.js
 import router from '@system.router';
 import prompt from '@system.prompt';
+
 export default {
-  data: {    
-    selectList:["text","data","time","datetime","multitext"],
-    rangetext:['15', "20", "25"],    
-    multitext:[["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],    
-    textvalue:'default textvalue',    
-    datevalue:'default datevalue',    
-    timevalue:'default timevalue',    
-    datetimevalue:'default datetimevalue',    
-    multitextvalue:'default multitextvalue',    
-    containsecond:true,    
-    multitextselect:[1,2,0],    
-    datetimeselect:'2012-5-6-11-25',    
-    timeselect:'11:22:30',    
-    dateselect:'2021-3-2',    
-    textselect:'2'
-  },
-  selectChange(e){
-        for(let i = 0;i<this.selectList.length;i++){
-            if(e.newValue == this.selectList[i]){
-                this.$element("picker"+i).show();
+    data: {
+        selectList: ["text", "data", "time", "datetime", "multitext"],
+        rangetext: ['15', "20", "25"],
+        multitext: [["a", "b", "c"], ["e", "f", "g"], ["h", "i"], ["k", "l", "m"]],
+        textvalue: 'default textvalue',
+        datevalue: 'default datevalue',
+        timevalue: 'default timevalue',
+        datetimevalue: 'default datetimevalue',
+        multitextvalue: 'default multitextvalue',
+        containsecond: true,
+        multitextselect: [1, 2, 0],
+        datetimeselect: '2012-5-6-11-25',
+        timeselect: '11:22:30',
+        dateselect: '2021-3-2',
+        textselect: '2'
+    },
+    selectChange(e) {
+        for (let i = 0;i < this.selectList.length; i++) {
+            if (e.newValue == this.selectList[i]) {
+                this.$element("picker" + i).show();
             }
         }
     },
-  textonchange(e) {    
-    this.textvalue = e.newValue;    
-    prompt.showToast({ message:"text:"+e.newValue+",newSelected:"+e.newSelected })
-  },
-  textoncancel(e) {    
-    prompt.showToast({ message:"text: textoncancel" })
-  },
-  dateonchange(e) {    
-    this.datevalue = e.year + "-" + e.month + "-" + e.day;    
-    prompt.showToast({ message:"date:"+e.year+"-"+(e.month+1)+"-"+e.day })
-  },
-  dateoncancel() {    
-    prompt.showToast({ message:"date: dateoncancel" })
-  },
-  timeonchange(e) {    
-    if(this.containsecond){        
-      this.timevalue=e.hour+":"+e.minute+":"+e.second;        
-      prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute + ":" + e.second })
-    } else {        
-      this.timevalue=e.hour+":"+e.minute;        
-      prompt.showToast({ message:"Time:" + e.hour + ":" + e.minute })
-    }},
-  timeoncancel() {    
-    prompt.showToast({ message:"timeoncancel" })
-  },
-  datetimeonchange(e) {    
-    this.datetimevalue=e.year+"-"+e.month+"-"+e.day+" "+e.hour+":"+e.minute;    
-    prompt.showToast({ message:"Time:"+(e.month+1)+"-"+e.day+" "+e.hour+":"+e.minute })
-  },
-  datetimeoncancel() {    
-    prompt.showToast({ message:"datetimeoncancel" })
-  },
-  multitextonchange(e) {    
-    this.multitextvalue=e.newValue;    
-    prompt.showToast({ message:"Multi-column text change" + e.newValue })
-  },
-  multitextoncancel() {    
-    prompt.showToast({ message:"multitextoncancel" })
-  },
-  popup_picker() {    
-    this.$element("picker_text").show();
-  },
+    textonchange(e) {
+        this.textvalue = e.newValue;
+        prompt.showToast({
+            message: "text:" + e.newValue + ",newSelected:" + e.newSelected
+        })
+    },
+    textoncancel(e) {
+        prompt.showToast({
+            message: "text: textoncancel"
+        })
+    },
+    dateonchange(e) {
+        this.datevalue = e.year + "-" + e.month + "-" + e.day;
+        prompt.showToast({
+            message: "date:" + e.year + "-" + (e.month + 1) + "-" + e.day
+        })
+    },
+    dateoncancel() {
+        prompt.showToast({
+            message: "date: dateoncancel"
+        })
+    },
+    timeonchange(e) {
+        if (this.containsecond) {
+            this.timevalue = e.hour + ":" + e.minute + ":" + e.second;
+            prompt.showToast({
+                message: "Time:" + e.hour + ":" + e.minute + ":" + e.second
+            })
+        } else {
+            this.timevalue = e.hour + ":" + e.minute;
+            prompt.showToast({
+                message: "Time:" + e.hour + ":" + e.minute
+            })
+        }
+    },
+    timeoncancel() {
+        prompt.showToast({
+            message: "timeoncancel"
+        })
+    },
+    datetimeonchange(e) {
+        this.datetimevalue = e.year + "-" + e.month + "-" + e.day + " " + e.hour + ":" + e.minute;
+        prompt.showToast({
+            message: "Time:" + (e.month + 1) + "-" + e.day + " " + e.hour + ":" + e.minute
+        })
+    },
+    datetimeoncancel() {
+        prompt.showToast({
+            message: "datetimeoncancel"
+        })
+    },
+    multitextonchange(e) {
+        this.multitextvalue = e.newValue;
+        prompt.showToast({
+            message: "Multi-column text change" + e.newValue
+        })
+    },
+    multitextoncancel() {
+        prompt.showToast({
+            message: "multitextoncancel"
+        })
+    },
+    popup_picker() {
+        this.$element("picker_text").show();
+    },
 }
 ```
 
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
index 396137bfec9a550a7d5e615c397cdfd1470cbae2..7414bbdc09505ec7ba9523eeaf200349bbcb1fbd 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-list.md
@@ -118,10 +118,10 @@ export default {
   data: {
     todolist: [{
       title: '刷题',
-      date: '2021-12-31 10:00:00',
+      date: '2021-12-31 10:00:00'
     }, {
       title: '看电影',
-      date: '2021-12-31 20:00:00',
+      date: '2021-12-31 20:00:00'
     }],
   },
 }
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md
index 2b91d44ae98b9d706c0cf8c6c64631f827406159..fad69559050a21e56ed32a0004645d6459722c55 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-panel.md
@@ -85,58 +85,63 @@
 ```html
 <!-- xxx.hml -->
 <div class="doc-page">
-  <div class="btn-div">
-    <button type="capsule" value="Click here" onclick="showPanel"></button>
-  </div>
-  <panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
-    <div class="panel-div">
-      <div class="inner-txt">
-        <text class="txt">Simple panel in {{modeFlag}} mode</text>
-      </div>
-      <div class="inner-btn">
-        <button type="capsule" value="Close" onclick="closePanel"></button>
-      </div>
+    <div class="btn-div">
+        <button type="capsule" value="Click here" onclick="showPanel"></button>
     </div>
-  </panel>
+    <panel id="simplepanel" type="foldable" mode="half" onsizechange="changeMode" miniheight="200px">
+        <div class="panel-div">
+            <div class="inner-txt">
+                <text class="txt">Simple panel in {{ modeFlag }} mode</text>
+            </div>
+            <div class="inner-btn">
+                <button type="capsule" value="Close" onclick="closePanel"></button>
+            </div>
+        </div>
+    </panel>
 </div>
 ```
 
 ```css
 /* xxx.css */
 .doc-page {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
+
 .btn-div {
-  width: 100%;
-  height: 200px;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+    width: 100%;
+    height: 200px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
+
 .txt {
-  color: #000000;
-  font-weight: bold;
-  font-size: 39px;
+    color: #000000;
+    font-weight: bold;
+    font-size: 39px;
 }
+
 .panel-div {
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
+    width: 100%;
+    flex-direction: column;
+    align-items: center;
 }
+
 .inner-txt {
-  width: 100%;
-  height: 160px;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+    width: 100%;
+    height: 160px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
 }
+
 .inner-btn {
-  width: 100%;
-  height: 120px;
-  justify-content: center;
-  align-items: center;
+    width: 100%;
+    height: 120px;
+    justify-content: center;
+    align-items: center;
 }
 ```
 
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
index b6681a3a43402e11518ee088d097236faf4a0deb..47cfbf39da7cbadfc63acc8b9fe5b131e06303b3 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-popup.md
@@ -115,7 +115,7 @@ export default {
   visibilitychange(e) {
     prompt.showToast({
       message: 'visibility change visibility: ' + e.visibility,
-        duration: 3000,
+        duration: 3000
     }); 
   },
   showpopup() {
@@ -123,7 +123,7 @@ export default {
   },
   hidepopup() {
     this.$element("popup").hide();
-  },
+  }
 }
 ```
 
diff --git a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
index a62cc034ebbc4af29821b30aaf386be70afe5b15..164dbf11028ce05b7d9b6db1dfafb50f9c502883 100644
--- a/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
+++ b/zh-cn/application-dev/reference/arkui-js/js-components-container-stepper.md
@@ -66,19 +66,19 @@
   <stepper class="stepper" id="mystepper" index="0"  onnext="nextclick" onback="backclick">
     <stepper-item class ="stepperItem" label="{{label_1}}">
       <div class = "stepperItemContent" >
-        <text class = "text">First screen</text>
+        <text>First screen</text>
       </div>
       <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
     </stepper-item>
     <stepper-item class ="stepperItem" label="{{label_2}}">
       <div class = "stepperItemContent" >
-        <text class = "text">Second screen</text>
+        <text>Second screen</text>
       </div>
       <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
     </stepper-item>
     <stepper-item class ="stepperItem" label="{{label_3}}">
       <div class = "stepperItemContent" >
-        <text class = "text">Third screen</text>
+        <text>Third screen</text>
       </div>
       <button type="capsule" class ="button" value="setRightButtonStatus" onclick="setRightButton"></button>
     </stepper-item>
@@ -100,7 +100,6 @@
   align-items: center;
 }
 .stepperItemContent {
-  color: #0000ff;
   font-size: 50px;
   justify-content: center;
 }
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.gif b/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.gif
new file mode 100644
index 0000000000000000000000000000000000000000..dd8d0f1a9f9a786de94abf348130c526ecb09641
Binary files /dev/null and b/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.gif differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.png b/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.png
deleted file mode 100644
index 22285e0910e3c447036d2144194a2e4301c2df6f..0000000000000000000000000000000000000000
Binary files a/zh-cn/application-dev/reference/arkui-ts/figures/borderImage.png and /dev/null differ
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
index 9c949fb5fc484b044569c0a7eb62a76dd45210cf..0ff5a63942bf40f86eddc55976e9cd7520975553 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-basic-gestures-pangesture.md
@@ -17,7 +17,7 @@ PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: numb
 | -------- | -------- | -------- | -------- |
 | fingers | number | 否 | 触发拖动的最少手指数，最小为1指，&nbsp;最大取值为10指。<br/>默认值：1 |
 | direction | PanDirection | 否 | 触发拖动的手势方向，此枚举值支持逻辑与(&amp;)和逻辑或（\|）运算。<br/>默认值：PanDirection.All |
-| distance | number | 否 | 最小拖动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> tab滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
+| distance | number | 否 | 最小拖动识别距离，单位为vp。<br/>默认值：5.0<br/>**说明：**<br/>> [Tabs组件](ts-container-tabs.md)滑动与该拖动手势事件同时存在时，可将distance值设为1，使拖动更灵敏，避免造成事件错乱。 |
 
 ## PanDirection枚举说明
 
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
index 40a3f6611fba38b4e552c80c95246e8ec951c5cc..9faa97699ad6f5aee57dea41a89845828a86b430 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
@@ -66,8 +66,8 @@ RenderingContextSettings(antialias?: boolean)
 @Entry
 @Component
 struct FillStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -96,8 +96,8 @@ struct FillStyleExample {
 @Entry
 @Component
 struct LineWidthExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -126,8 +126,8 @@ struct LineWidthExample {
 @Entry
 @Component
 struct StrokeStyleExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -158,8 +158,8 @@ struct StrokeStyleExample {
 @Entry
 @Component
 struct LineCapExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -192,8 +192,8 @@ struct LineCapExample {
 @Entry
 @Component
 struct LineJoinExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -227,8 +227,8 @@ struct LineJoinExample {
 @Entry
 @Component
 struct MiterLimit {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -262,8 +262,8 @@ struct MiterLimit {
 @Entry
 @Component
 struct Fonts {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -292,8 +292,8 @@ struct Fonts {
 @Entry
 @Component
 struct CanvasExample {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -306,9 +306,7 @@ struct CanvasExample {
         this.context.moveTo(140, 10)
         this.context.lineTo(140, 160)
         this.context.stroke()
-
         this.context.font = '18px sans-serif'
-
         this.context.textAlign = 'start'
         this.context.fillText('textAlign=start', 140, 60)
         this.context.textAlign = 'end'
@@ -337,8 +335,8 @@ struct CanvasExample {
 @Entry
 @Component
 struct TextBaseline {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -351,9 +349,7 @@ struct TextBaseline {
           this.context.moveTo(0, 120)
           this.context.lineTo(400, 120)
           this.context.stroke()
-
           this.context.font = '20px sans-serif'
-
           this.context.textBaseline = 'top'
           this.context.fillText('Top', 10, 120)
           this.context.textBaseline = 'bottom'
@@ -382,8 +378,8 @@ struct TextBaseline {
 @Entry
 @Component
 struct GlobalAlpha {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -415,8 +411,8 @@ struct GlobalAlpha {
 @Entry
 @Component
 struct LineDashOffset {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -427,8 +423,8 @@ struct LineDashOffset {
         .onReady(() =>{
           this.context.arc(100, 75, 50, 0, 6.28)
           this.context.setLineDash([10,20])
-          this.context.lineDashOffset = 10.0;
-          this.context.stroke();
+          this.context.lineDashOffset = 10.0
+          this.context.stroke()
       })
     }
     .width('100%')
@@ -461,8 +457,8 @@ struct LineDashOffset {
 @Entry
 @Component
 struct GlobalCompositeOperation {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -499,8 +495,8 @@ struct GlobalCompositeOperation {
 @Entry
 @Component
 struct ShadowBlur {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -531,8 +527,8 @@ struct ShadowBlur {
 @Entry
 @Component
 struct ShadowColor {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -563,8 +559,8 @@ struct ShadowColor {
 @Entry
 @Component
 struct ShadowOffsetX {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -596,8 +592,8 @@ struct ShadowOffsetX {
 @Entry
 @Component
 struct ShadowOffsetY {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   build() {
     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
       Canvas(this.context)
@@ -628,8 +624,8 @@ struct ShadowOffsetY {
 @Entry
 @Component
 struct ImageSmoothingEnabled {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
   
   build() {
@@ -677,8 +673,8 @@ fillRect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct FillRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -721,8 +717,8 @@ strokeRect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct StrokeRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -765,8 +761,8 @@ clearRect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct ClearRect {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -811,8 +807,8 @@ fillText(text: string, x: number, y: number, maxWidth?: number): void
   @Entry
   @Component
   struct FillText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -856,8 +852,8 @@ strokeText(text: string, x: number, y: number, maxWidth?:number): void
   @Entry
   @Component
   struct StrokeText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -925,8 +921,8 @@ measureText(text: string): TextMetrics
   @Entry
   @Component
   struct MeasureText {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -968,8 +964,8 @@ stroke(path?: Path2D): void
   @Entry
   @Component
   struct Stroke {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1008,8 +1004,8 @@ beginPath(): void
   @Entry
   @Component
   struct BeginPath {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1055,8 +1051,8 @@ moveTo(x: number, y: number): void
   @Entry
   @Component
   struct MoveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1100,8 +1096,8 @@ lineTo(x: number, y: number): void
   @Entry
   @Component
   struct LineTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1138,8 +1134,8 @@ closePath(): void
   @Entry
   @Component
   struct ClosePath {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1191,9 +1187,9 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
   @Entry
   @Component
   struct CreatePattern {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg");
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/icon.jpg")
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1240,8 +1236,8 @@ bezierCurveTo(cp1x: number, cp1y: number, cp2x: number, cp2y: number, x: number,
   @Entry
   @Component
   struct BezierCurveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1287,8 +1283,8 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
   @Entry
   @Component
   struct QuadraticCurveTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1297,10 +1293,10 @@ quadraticCurveTo(cpx: number, cpy: number, x: number, y: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.beginPath();
-            this.context.moveTo(20, 20);
-            this.context.quadraticCurveTo(100, 100, 200, 20);
-            this.context.stroke();
+            this.context.beginPath()
+            this.context.moveTo(20, 20)
+            this.context.quadraticCurveTo(100, 100, 200, 20)
+            this.context.stroke()
         })
       }
       .width('100%')
@@ -1336,8 +1332,8 @@ arc(x: number, y: number, radius: number, startAngle: number, endAngle: number,
   @Entry
   @Component
   struct Arc {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1383,8 +1379,8 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
   @Entry
   @Component
   struct ArcTo {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1393,9 +1389,9 @@ arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.moveTo(100, 20);
-            this.context.arcTo(150, 20, 150, 70, 50);
-            this.context.stroke();
+            this.context.moveTo(100, 20)
+            this.context.arcTo(150, 20, 150, 70, 50)
+            this.context.stroke()
           })
       }
       .width('100%')
@@ -1433,8 +1429,8 @@ ellipse(x: number, y: number, radiusX: number, radiusY: number, rotation: number
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1479,8 +1475,8 @@ rect(x: number, y: number, w: number, h: number): void
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1522,8 +1518,8 @@ fill(fillRule?: CanvasFillRule): void
   @Entry
   @Component
   struct Fill {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1574,17 +1570,17 @@ struct Fill {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          let region = new Path2D();
-          region.moveTo(30, 90);
-          region.lineTo(110, 20);
-          region.lineTo(240, 130);
-          region.lineTo(60, 130);
-          region.lineTo(190, 20);
-          region.lineTo(270, 90);
+          let region = new Path2D()
+          region.moveTo(30, 90)
+          region.lineTo(110, 20)
+          region.lineTo(240, 130)
+          region.lineTo(60, 130)
+          region.lineTo(190, 20)
+          region.lineTo(270, 90)
           region.closePath();
           // Fill path
-          this.context.fillStyle = 'green';
-          this.context.fill(region, "evenodd");
+          this.context.fillStyle = 'green'
+          this.context.fill(region, "evenodd")
         })
     }
     .width('100%')
@@ -1615,8 +1611,8 @@ clip(fillRule?: CanvasFillRule): void
   @Entry
   @Component
   struct Clip {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1669,9 +1665,9 @@ struct Clip {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          let region = new Path2D();
-          region.rect(80,10,20,130);
-          region.rect(40,50,100,50);
+          let region = new Path2D()
+          region.rect(80,10,20,130)
+          region.rect(40,50,100,50)
           this.context.clip(region,"evenodd")
           this.context.fillStyle = "rgb(255,0,0)"
           this.context.fillRect(0, 0, this.context.width, this.context.height)
@@ -1739,8 +1735,8 @@ rotate(angle: number): void
   @Entry
   @Component
   struct Rotate {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1782,8 +1778,8 @@ scale(x: number, y: number): void
   @Entry
   @Component
   struct Scale {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1838,8 +1834,8 @@ transform方法对应一个变换矩阵，想对一个图形进行变化的时
   @Entry
   @Component
   struct Transform {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1891,8 +1887,8 @@ setTransform方法使用的参数和transform()方法相同，但setTransform()
   @Entry
   @Component
   struct SetTransform {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1942,8 +1938,8 @@ translate(x: number, y: number): void
   @Entry
   @Component
   struct Translate {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -1998,9 +1994,9 @@ drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sw: number, sh:
   @Entry
   @Component
   struct ImageExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
-    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg");
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+    private img:ImageBitmap = new ImageBitmap("common/images/example.jpg")
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2102,8 +2098,8 @@ getImageData(sx: number, sy: number, sw: number, sh: number): ImageData
 @Entry
 @Component
 struct GetImageData {
-  private settings: RenderingContextSettings = new RenderingContextSettings(true);
-  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
   private img:ImageBitmap = new ImageBitmap("/common/images/1234.png")
 
   build() {
@@ -2113,9 +2109,9 @@ struct GetImageData {
         .height('100%')
         .backgroundColor('#ffff00')
         .onReady(() =>{
-          this.context.drawImage(this.img,0,0,130,130);
-          var imagedata = this.context.getImageData(50,50,130,130);
-          this.context.putImageData(imagedata,150,150);
+          this.context.drawImage(this.img,0,0,130,130)
+          var imagedata = this.context.getImageData(50,50,130,130)
+          this.context.putImageData(imagedata,150,150)
         })
     }
     .width('100%')
@@ -2154,8 +2150,8 @@ putImageData(imageData: ImageData, dx: number, dy: number, dirtyX: number, dirty
   @Entry
   @Component
   struct PutImageData {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2268,7 +2264,7 @@ struct CanvasGetLineDash {
           .onReady(() => {
             this.context.arc(100, 75, 50, 0, 6.28)
             this.context.setLineDash([10,20])
-            this.context.stroke();
+            this.context.stroke()
             let res = this.context.getLineDash()
           })
       }
@@ -2405,8 +2401,8 @@ restore(): void
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2415,11 +2411,11 @@ restore(): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.save(); // save the default state
-            this.context.fillStyle = "green";
-            this.context.fillRect(20, 20, 100, 100);
-            this.context.restore(); // restore to the default state
-            this.context.fillRect(150, 75, 100, 100);
+            this.context.save() // save the default state
+            this.context.fillStyle = "green"
+            this.context.fillRect(20, 20, 100, 100)
+            this.context.restore() // restore to the default state
+            this.context.fillRect(150, 75, 100, 100)
           })
       }
       .width('100%')
@@ -2443,8 +2439,8 @@ save(): void
   @Entry
   @Component
   struct CanvasExample {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
 
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2453,11 +2449,11 @@ save(): void
           .height('100%')
           .backgroundColor('#ffff00')
           .onReady(() =>{
-            this.context.save(); // save the default state
-            this.context.fillStyle = "green";
-            this.context.fillRect(20, 20, 100, 100);
-            this.context.restore(); // restore to the default state
-            this.context.fillRect(150, 75, 100, 100);
+            this.context.save() // save the default state
+            this.context.fillStyle = "green"
+            this.context.fillRect(20, 20, 100, 100)
+            this.context.restore() // restore to the default state
+            this.context.fillRect(150, 75, 100, 100)
           })
       }
       .width('100%')
@@ -2490,8 +2486,8 @@ createLinearGradient(x0: number, y0: number, x1: number, y1: number): void
   @Entry
   @Component
   struct CreateLinearGradient {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
@@ -2541,8 +2537,8 @@ createRadialGradient(x0: number, y0: number, r0: number, x1: number, y1: number,
   @Entry
   @Component
   struct CreateRadialGradient {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true);
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
+    private settings: RenderingContextSettings = new RenderingContextSettings(true)
+    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
     
     build() {
       Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
index 50179795c147ab33bd2609f7127c53059aa189ef..f64c19d9c7d19cc5c31280f0ddbffbcd86deee75 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-combined-gestures.md
@@ -56,7 +56,7 @@ struct GestureGroupExample {
     .margin(20)
     .border({ width: 3, style: this.borderStyles })
     .gesture(
-      //以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
+      // 以下组合手势为顺序识别，当长按手势事件未正常触发时则不会触发拖动手势事件
     GestureGroup(GestureMode.Sequence,
     LongPressGesture({ repeat: true })
       .onAction((event: GestureEvent) => {
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
index 191b9ffab8e744a75626d610f1ade17d89d61025..165735247a627b14db1e3f5b33575d59beb61038 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvasgradient.md
@@ -17,40 +17,41 @@ addColorStop(offset: number, color: string): void
 
 **参数：**
 
-  | 参数     | 类型     | 必填   | 默认值       | 描述                           |
-  | ------ | ------ | ---- | --------- | ---------------------------- |
-  | offset | number | 是    | 0         | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
-  | color  | string | 是    | '#ffffff' | 设置渐变的颜色。                     |
+| 参数     | 类型     | 必填   | 默认值       | 描述                           |
+| ------ | ------ | ---- | --------- | ---------------------------- |
+| offset | number | 是    | 0         | 设置渐变点距离起点的位置占总体长度的比例，范围为0到1。 |
+| color  | string | 是    | '#ffffff' | 设置渐变的颜色。                     |
 
 
 **示例：**
 
   ```ts
-  // xxx.ets
-  @Entry
-  @Component
-  struct Page45 {
-    private settings: RenderingContextSettings = new RenderingContextSettings(true)
-    private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
-
-    build() {
-      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
-        Canvas(this.context)
-          .width('100%')
-          .height('100%')
-          .backgroundColor('#ffff00')
-          .onReady(() =>{
-            var grad = this.context.createLinearGradient(50,0, 300,100)
-            grad.addColorStop(0.0, 'red')
-            grad.addColorStop(0.5, 'white')
-            grad.addColorStop(1.0, 'green')
-            this.context.fillStyle = grad
-            this.context.fillRect(0, 0, 500, 500)
-          })
-      }
-      .width('100%')
-      .height('100%')
-    }}
+// xxx.ets
+@Entry
+@Component
+struct Page45 {
+  private settings: RenderingContextSettings = new RenderingContextSettings(true)
+  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
+
+  build() {
+    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
+      Canvas(this.context)
+        .width('100%')
+        .height('100%')
+        .backgroundColor('#ffff00')
+        .onReady(() => {
+          var grad = this.context.createLinearGradient(50, 0, 300, 100)
+          grad.addColorStop(0.0, 'red')
+          grad.addColorStop(0.5, 'white')
+          grad.addColorStop(1.0, 'green')
+          this.context.fillStyle = grad
+          this.context.fillRect(0, 0, 500, 500)
+        })
+    }
+    .width('100%')
+    .height('100%')
+  }
+}
   ```
   ![zh-cn_image_0000001194032516](figures/zh-cn_image_0000001194032516.png)
 
diff --git a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
index 574b3191a8a64b5d67f2e5bd17408e6b71e7f72c..b5cab28a14a9870fbe9231beb341c28b1f419dfa 100644
--- a/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
+++ b/zh-cn/application-dev/reference/arkui-ts/ts-universal-attributes-border-image.md
@@ -41,19 +41,31 @@
 @Entry
 @Component
 struct Index {
+  @State outSetValue: number = 40
 
   build() {
     Row() {
       Column() {
-        Text('This is borderImage.').textAlign(TextAlign.Center)
+        Text('This is borderImage.').textAlign(TextAlign.Center).fontSize(50)
           .borderImage({
-            source: "borderOrigin.png",
-            slice: {top:"31%", bottom:"31%", left:"31%", right:"31%"},
-            width: {top:"20px", bottom:"20px", left:"20px", right:"20px"},
-            outset: {top:"5px", bottom:"5px", left:"5px", right:"5px"},
+            source: $r('app.media.heart'),
+            slice: `${this.outSetValue}%`,
+            width: `${this.outSetValue}px`,
+            outset: '5px',
             repeat: RepeatMode.Repeat,
             fill: false
           })
+        Slider({
+          value: this.outSetValue,
+          min: 0,
+          max: 100,
+          style: SliderStyle.OutSet
+        })
+          .margin({ top: 30 })
+          .onChange((value: number, mode: SliderChangeMode) => {
+            this.outSetValue = value;
+            console.info('value:' + value + 'mode:' + mode.toString());
+          })
       }
       .width('100%')
     }
@@ -62,7 +74,7 @@ struct Index {
 }
 ```
 
-![zh-cn_image_borderImage](figures/borderImage.png)
+![zh-cn_image_borderImage](figures/borderImage.gif)
 
 
 ```ts
@@ -73,7 +85,7 @@ struct Index {
   build() {
     Row() {
       Column() {
-        Text('This is gradient color.').textAlign(TextAlign.Center)
+        Text('This is gradient color.').textAlign(TextAlign.Center).width(68)
           .borderImage({
             source: {
               angle: 90,