diff --git a/pages.json b/pages.json
index 606fe3a7e50f16f73fe8d40ce6d9ea17481f5cb1..a6b55ce91f9cc7ed4353474f9da074c7196c4451 100644
--- a/pages.json
+++ b/pages.json
@@ -14,12 +14,6 @@
         "navigationBarTitleText": "view"
       }
     },
-    {
-      "path": "pages/component/view/view-draw",
-      "style": {
-        "navigationBarTitleText": "DrawableContext"
-      }
-    },
     {
       "path": "pages/component/scroll-view/scroll-view",
       "style": {
@@ -970,7 +964,15 @@
       "path" : "pages/API/element-takesnapshot/element-takesnapshot",
       "style" :
       {
-        "navigationBarTitleText" : "",
+        "navigationBarTitleText" : "takeSnapshot",
+        "enablePullDownRefresh" : false
+      }
+    },
+    {
+      "path" : "pages/API/element-draw/element-draw",
+      "style" : 
+      {
+        "navigationBarTitleText" : "getDrawableContext",
         "enablePullDownRefresh" : false
       }
     }
diff --git a/pages/component/view/view-draw.uvue b/pages/API/element-draw/element-draw.uvue
similarity index 84%
rename from pages/component/view/view-draw.uvue
rename to pages/API/element-draw/element-draw.uvue
index d358b9dda6cb153520f2a676739b3037ecf9b8ad..1b8be329764b9e9708bb06d2138c6abb61d5bfa3 100644
--- a/pages/component/view/view-draw.uvue
+++ b/pages/API/element-draw/element-draw.uvue
@@ -3,14 +3,14 @@
   <scroll-view style="flex: 1">
   <!-- #endif -->
     <view>
-      <view ref="draw-text-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-line-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-circle-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-dash-line" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-house" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-style" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-odd" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
-      <view ref="draw-arcto" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-text-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-line-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-circle-view" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-dash-line" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-house" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-style" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-odd" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
+      <view id="draw-arcto" style="width: 750rpx;height: 550rpx; background-color: lightgray;margin: 30rpx 0rpx;"></view>
     </view>
   <!-- #ifdef APP -->
   </scroll-view>
@@ -57,8 +57,8 @@
     },
     methods: {
       drawText() {
-        let element = (this.$refs['draw-text-view'] as Element)
-        let ctx = element.getDrawableContext()
+        let element = uni.getElementById('draw-text-view')
+        let ctx = element!.getDrawableContext()
         let width = element.getBoundingClientRect().width
         ctx!!.reset()
         ctx!!.font = "15px"
@@ -74,7 +74,7 @@
         ctx!!.update()
       },
       drawLines() {
-        let ctx = (this.$refs['draw-line-view'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-line-view')!.getDrawableContext()
         ctx!!.reset()
         ctx!!.lineWidth = 10;
 
@@ -129,7 +129,7 @@
         y += 15;
       },
       drawCircles() {
-        let ctx = (this.$refs['draw-circle-view'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-circle-view')!.getDrawableContext()
         ctx!!.reset()
         // Draw shapes
         for (var i = 0; i < 4; i++) {
@@ -155,7 +155,7 @@
       },
 
       drawStar() {
-        let ctx = (this.$refs['draw-dash-line'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-dash-line')!.getDrawableContext()
         ctx!!.reset()
         ctx!!.beginPath();
         var horn = 5; // 画5个角
@@ -226,7 +226,7 @@
         return result
       },
       drawhouse() {
-        let ctx = (this.$refs['draw-house'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-house')!.getDrawableContext()
         ctx!!.reset()
         ctx!!.lineWidth = 10;
 
@@ -246,7 +246,7 @@
         ctx!!.update()
       },
       drawPoint() {
-        let ctx = (this.$refs['draw-style'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-style')!.getDrawableContext()
         ctx!!.reset()
         for (let i = 0; i < 6; i++) {
           for (let j = 0; j < 6; j++) {
@@ -265,7 +265,7 @@
         ctx!!.update()
       },
       drawRect() {
-        let ctx = (this.$refs['draw-odd'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-odd')!.getDrawableContext()
         ctx!!.reset()
         // Create path
         ctx!!.moveTo(30, 90);
@@ -283,7 +283,7 @@
 
       },
       drawArcTo() {
-        let ctx = (this.$refs['draw-arcto'] as Element).getDrawableContext()
+        let ctx = uni.getElementById('draw-arcto')!.getDrawableContext()
         ctx!.reset()
         ctx!.beginPath();
         ctx!.moveTo(50, 20);
diff --git a/pages/component/view/view.uvue b/pages/component/view/view.uvue
index c2e5fdbbef4087f32f8e8308d84844e2ad100358..54383fe67dc01567fb409aa44fc70041f84da5af 100644
--- a/pages/component/view/view.uvue
+++ b/pages/component/view/view.uvue
@@ -12,9 +12,6 @@
       <boolean-data :defaultValue="false" title="是否阻止本节点的祖先节点出现点击态" @change="change_stop_propagation_boolean"></boolean-data>
       <enum-data :items="start_time_enum" title="按住后多久出现点击态" @change="radio_change_start_time_enum"></enum-data>
       <enum-data :items="stay_time_enum" title="手指松开后点击态保留时间" @change="radio_change_stay_time_enum"></enum-data>
-      <view class="uni-padding-wrap uni-common-mt uni-common-mb">
-        <button class="uni-common-mt" @click="goGeneralAttribute('/pages/component/view/view-draw')">DrawableContext</button>
-      </view>
     </view>
     <!-- #ifdef APP -->
   </scroll-view>
@@ -46,11 +43,6 @@ export default {
     radio_change_stay_time_enum(time : number) {
       this.stay_time = time
     },
-    goGeneralAttribute(path: string) {
-      uni.navigateTo({
-        url: path,
-      })
-    },
   },
 }
 </script>
diff --git a/pages/tabBar/API.uvue b/pages/tabBar/API.uvue
index 7e5adfca509af55bcfef96210e1ed0edf4acd56a..61c0dc4f2cb822def0a2071032b7facf534ef011 100644
--- a/pages/tabBar/API.uvue
+++ b/pages/tabBar/API.uvue
@@ -148,9 +148,13 @@
                 api: ["getElementById"]
               },
               {
+                name: 'element draw',
+                url: 'element-draw',
+                api: ["Element.getDrawableContext"]
+              },{
                 name: 'element截图',
                 url: 'element-takesnapshot',
-                api: ["takeSnapshot"]
+                api: ["Element.takeSnapshot"]
               },
               {
                 name: 'node节点',