diff --git a/pages/component/view/view-draw.uvue b/pages/component/view/view-draw.uvue
index 5d76f772a36e095100ba23716bfcec11178c8e34..d358b9dda6cb153520f2a676739b3037ecf9b8ad 100644
--- a/pages/component/view/view-draw.uvue
+++ b/pages/component/view/view-draw.uvue
@@ -57,9 +57,9 @@
     },
     methods: {
       drawText() {
-        let node = (this.$refs['draw-text-view'] as INode)
-        let ctx = node.getDrawableContext()
-        let width = node.getBoundingClientRect().width
+        let element = (this.$refs['draw-text-view'] as Element)
+        let ctx = element.getDrawableContext()
+        let width = element.getBoundingClientRect().width
         ctx!!.reset()
         ctx!!.font = "15px"
         ctx!.textAlign = "center"
@@ -74,7 +74,7 @@
         ctx!!.update()
       },
       drawLines() {
-        let ctx = (this.$refs['draw-line-view'] as INode).getDrawableContext()
+        let ctx = (this.$refs['draw-line-view'] as Element).getDrawableContext()
         ctx!!.reset()
         ctx!!.lineWidth = 10;
 
@@ -129,7 +129,7 @@
         y += 15;
       },
       drawCircles() {
-        let ctx = (this.$refs['draw-circle-view'] as INode).getDrawableContext()
+        let ctx = (this.$refs['draw-circle-view'] as Element).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 INode).getDrawableContext()
+        let ctx = (this.$refs['draw-dash-line'] as Element).getDrawableContext()
         ctx!!.reset()
         ctx!!.beginPath();
         var horn = 5; // 画5个角
@@ -226,7 +226,7 @@
         return result
       },
       drawhouse() {
-        let ctx = (this.$refs['draw-house'] as INode).getDrawableContext()
+        let ctx = (this.$refs['draw-house'] as Element).getDrawableContext()
         ctx!!.reset()
         ctx!!.lineWidth = 10;
 
@@ -246,7 +246,7 @@
         ctx!!.update()
       },
       drawPoint() {
-        let ctx = (this.$refs['draw-style'] as INode).getDrawableContext()
+        let ctx = (this.$refs['draw-style'] as Element).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 INode).getDrawableContext()
+        let ctx = (this.$refs['draw-odd'] as Element).getDrawableContext()
         ctx!!.reset()
         // Create path
         ctx!!.moveTo(30, 90);
@@ -283,7 +283,7 @@
 
       },
       drawArcTo() {
-        let ctx = (this.$refs['draw-arcto'] as INode).getDrawableContext()
+        let ctx = (this.$refs['draw-arcto'] as Element).getDrawableContext()
         ctx!.reset()
         ctx!.beginPath();
         ctx!.moveTo(50, 20);