diff --git a/pages/API/element-draw/element-draw.uvue b/pages/API/element-draw/element-draw.uvue
index 1947536513fd4ba288aa2ec6f82b60a6f625458d..45be7e10b7675b3efbe85ace289088fa697c9b02 100644
--- a/pages/API/element-draw/element-draw.uvue
+++ b/pages/API/element-draw/element-draw.uvue
@@ -17,7 +17,7 @@
   <!-- #endif -->
 </template>
 
-<script>
+<script lang="uts">
   var y = 160
   export default {
     data() {
@@ -57,68 +57,68 @@
     },
     methods: {
       drawText() {
-        let element = uni.getElementById('draw-text-view')
-        let ctx = element!.getDrawableContext()
-        let width = element!.getBoundingClientRect().width
-        ctx!.reset()
-        ctx!.font = "15px"
-        ctx!.textAlign = "center"
+        let element = uni.getElementById('draw-text-view')!
+        let ctx = element.getDrawableContext()!
+        let width = element.getBoundingClientRect().width
+        ctx.reset()
+        ctx.font = "15px"
+        ctx.textAlign = "center"
         for (var i = 0; i < this.texts.length; i++) {
           let value = this.texts[i]
           if (i % 2 == 0) {
-            ctx!.fillText(value, width / 2, (20 * (i + 1)))
+            ctx.fillText(value, width / 2, (20 * (i + 1)))
           } else {
-            ctx!.strokeText(value, width / 2, (20 * (i + 1)))
+            ctx.strokeText(value, width / 2, (20 * (i + 1)))
           }
         }
-        ctx!.update()
+        ctx.update()
       },
       drawLines() {
-        let ctx = uni.getElementById('draw-line-view')!.getDrawableContext()
-        ctx!.reset()
-        ctx!.lineWidth = 10;
+        let ctx = uni.getElementById('draw-line-view')!.getDrawableContext()!
+        ctx.reset()
+        ctx.lineWidth = 10;
 
         ["round", "bevel", "miter"].forEach((join, i) => {
-          ctx!.lineJoin = join;
-          ctx!.beginPath();
-          ctx!.moveTo(5, 10 + i * 40);
-          ctx!.lineTo(50, 50 + i * 40);
-          ctx!.lineTo(90, 10 + i * 40);
-          ctx!.lineTo(130, 50 + i * 40);
-          ctx!.lineTo(170, 10 + i * 40);
-          ctx!.stroke();
+          ctx.lineJoin = join;
+          ctx.beginPath();
+          ctx.moveTo(5, 10 + i * 40);
+          ctx.lineTo(50, 50 + i * 40);
+          ctx.lineTo(90, 10 + i * 40);
+          ctx.lineTo(130, 50 + i * 40);
+          ctx.lineTo(170, 10 + i * 40);
+          ctx.stroke();
         });
-        ctx!.lineWidth = 1
+        ctx.lineWidth = 1
         var space = 170
-        ctx!.strokeStyle = '#09f';
-        ctx!.beginPath();
-        ctx!.moveTo(10 + space, 10);
-        ctx!.lineTo(140 + space, 10);
-        ctx!.moveTo(10 + space, 140);
-        ctx!.lineTo(140 + space, 140);
-        ctx!.stroke();
+        ctx.strokeStyle = '#09f';
+        ctx.beginPath();
+        ctx.moveTo(10 + space, 10);
+        ctx.lineTo(140 + space, 10);
+        ctx.moveTo(10 + space, 140);
+        ctx.lineTo(140 + space, 140);
+        ctx.stroke();
         // Draw lines
-        ctx!.strokeStyle = 'black';
+        ctx.strokeStyle = 'black';
         ['butt', 'round', 'square'].forEach((lineCap, i) => {
-          ctx!.lineWidth = 15;
-          ctx!.lineCap = lineCap;
-          ctx!.beginPath();
-          ctx!.moveTo(25 + space + i * 50, 10);
-          ctx!.lineTo(25 + space + i * 50, 140);
-          ctx!.stroke();
+          ctx.lineWidth = 15;
+          ctx.lineCap = lineCap;
+          ctx.beginPath();
+          ctx.moveTo(25 + space + i * 50, 10);
+          ctx.lineTo(25 + space + i * 50, 140);
+          ctx.stroke();
         });
-        ctx!.lineWidth = 1;
-        this.drawDashedLine([], ctx!);
-        this.drawDashedLine([2, 2], ctx!);
-        this.drawDashedLine([10, 10], ctx!);
-        this.drawDashedLine([20, 5], ctx!);
-        this.drawDashedLine([15, 3, 3, 3], ctx!);
-        this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx!);
-        ctx!.lineDashOffset = 18;
-        this.drawDashedLine([12, 3, 3], ctx!);
-        ctx!.lineDashOffset = 0
-        ctx!.setLineDash([0])
-        ctx!.update()
+        ctx.lineWidth = 1;
+        this.drawDashedLine([], ctx);
+        this.drawDashedLine([2, 2], ctx);
+        this.drawDashedLine([10, 10], ctx);
+        this.drawDashedLine([20, 5], ctx);
+        this.drawDashedLine([15, 3, 3, 3], ctx);
+        this.drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx);
+        ctx.lineDashOffset = 18;
+        this.drawDashedLine([12, 3, 3], ctx);
+        ctx.lineDashOffset = 0
+        ctx.setLineDash([0])
+        ctx.update()
       },
       drawDashedLine(pattern : Array<number>, ctx : DrawableContext) {
         ctx.beginPath();
@@ -129,12 +129,12 @@
         y += 15;
       },
       drawCircles() {
-        let ctx = uni.getElementById('draw-circle-view')!.getDrawableContext()
-        ctx!.reset()
+        let ctx = uni.getElementById('draw-circle-view')!.getDrawableContext()!
+        ctx.reset()
         // Draw shapes
         for (var i = 0; i < 4; i++) {
           for (var j = 0; j < 3; j++) {
-            ctx!.beginPath();
+            ctx.beginPath();
             var x = 25 + j * 50;               // x coordinate
             var y = 25 + i * 50;               // y coordinate
             var radius = 20;                    // Arc radius
@@ -142,22 +142,22 @@
             var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
             var clockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
 
-            ctx!.arc(x, y, radius, startAngle, endAngle, clockwise);
+            ctx.arc(x, y, radius, startAngle, endAngle, clockwise);
 
             if (i > 1) {
-              ctx!.fill();
+              ctx.fill();
             } else {
-              ctx!.stroke();
+              ctx.stroke();
             }
           }
         }
-        ctx!.update()
+        ctx.update()
       },
 
       drawStar() {
-        let ctx = uni.getElementById('draw-dash-line')!.getDrawableContext()
-        ctx!.reset()
-        ctx!.beginPath();
+        let ctx = uni.getElementById('draw-dash-line')!.getDrawableContext()!
+        ctx.reset()
+        ctx.beginPath();
         var horn = 5; // 画5个角
         var angle = 360 / horn; // 五个角的度数
         // 两个圆的半径
@@ -169,45 +169,45 @@
         for (var i = 0; i < horn; i++) {
           // 角度转弧度：角度/180*Math.PI
           // 外圆顶点坐标
-          ctx!.lineTo(Math.cos((18 + i * angle) / 180.0 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180.0 * Math.PI) * R + y);
+          ctx.lineTo(Math.cos((18 + i * angle) / 180.0 * Math.PI) * R + x, -Math.sin((18 + i * angle) / 180.0 * Math.PI) * R + y);
           // 內圆顶点坐标
-          ctx!.lineTo(Math.cos((54 + i * angle) / 180.0 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180.0 * Math.PI) * r + y);
+          ctx.lineTo(Math.cos((54 + i * angle) / 180.0 * Math.PI) * r + x, -Math.sin((54 + i * angle) / 180.0 * Math.PI) * r + y);
         }
         // closePath：关闭路径，将路径的终点与起点相连
-        ctx!.closePath();
-        ctx!.lineWidth = 3;
-        ctx!.fillStyle = '#E4EF00';
-        ctx!.strokeStyle = "red";
-        ctx!.fill();
-        ctx!.stroke();
+        ctx.closePath();
+        ctx.lineWidth = 3;
+        ctx.fillStyle = '#E4EF00';
+        ctx.strokeStyle = "red";
+        ctx.fill();
+        ctx.stroke();
 
-        ctx!.lineWidth = 10;
-        ctx!.beginPath()
-        ctx!.moveTo(170, 100)
-        ctx!.lineTo(255, 15)
-        ctx!.lineTo(340, 100)
-        ctx!.closePath()
-        ctx!.fill()
-        ctx!.strokeStyle = "blue"
-        ctx!.stroke()
-        ctx!.beginPath()
-        ctx!.moveTo(170, 145)
-        ctx!.lineTo(255, 45)
-        ctx!.lineTo(340, 145)
-        ctx!.closePath()
-        ctx!.fill()
-        ctx!.strokeStyle = "gray"
-        ctx!.stroke()
+        ctx.lineWidth = 10;
+        ctx.beginPath()
+        ctx.moveTo(170, 100)
+        ctx.lineTo(255, 15)
+        ctx.lineTo(340, 100)
+        ctx.closePath()
+        ctx.fill()
+        ctx.strokeStyle = "blue"
+        ctx.stroke()
+        ctx.beginPath()
+        ctx.moveTo(170, 145)
+        ctx.lineTo(255, 45)
+        ctx.lineTo(340, 145)
+        ctx.closePath()
+        ctx.fill()
+        ctx.strokeStyle = "gray"
+        ctx.stroke()
         // 未设置beginPath，导致上下表现一致，与前端一致
-        ctx!.moveTo(170, 190)
-        ctx!.lineTo(255, 90)
-        ctx!.lineTo(340, 190)
-        ctx!.closePath()
-        ctx!.fillStyle = "orange"
-        ctx!.fill()
-        ctx!.strokeStyle = "khaki"
-        ctx!.stroke()
-        ctx!.update()
+        ctx.moveTo(170, 190)
+        ctx.lineTo(255, 90)
+        ctx.lineTo(340, 190)
+        ctx.closePath()
+        ctx.fillStyle = "orange"
+        ctx.fill()
+        ctx.strokeStyle = "khaki"
+        ctx.stroke()
+        ctx.update()
       },
       hex(num : number) : string {
         if (num == 0) {
@@ -226,82 +226,82 @@
         return result
       },
       drawhouse() {
-        let ctx = uni.getElementById('draw-house')!.getDrawableContext()
-        ctx!.reset()
-        ctx!.lineWidth = 10;
+        let ctx = uni.getElementById('draw-house')!.getDrawableContext()!
+        ctx.reset()
+        ctx.lineWidth = 10;
 
         // Wall
-        ctx!.strokeRect(75, 140, 150, 110);
+        ctx.strokeRect(75, 140, 150, 110);
 
         // Door
-        ctx!.fillRect(130, 190, 40, 60);
+        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();
-        ctx!.update()
+        ctx.beginPath();
+        ctx.moveTo(50, 140);
+        ctx.lineTo(150, 60);
+        ctx.lineTo(250, 140);
+        ctx.closePath();
+        ctx.stroke();
+        ctx.update()
       },
       drawPoint() {
-        let ctx = uni.getElementById('draw-style')!.getDrawableContext()
-        ctx!.reset()
+        let ctx = uni.getElementById('draw-style')!.getDrawableContext()!
+        ctx.reset()
         for (let i = 0; i < 6; i++) {
           for (let j = 0; j < 6; j++) {
-            ctx!.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`;
-            ctx!.beginPath();
-            ctx!.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
-            ctx!.stroke();
+            ctx.strokeStyle = `rgb(0,${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)})`;
+            ctx.beginPath();
+            ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, Math.PI * 2, true);
+            ctx.stroke();
           }
         }
         for (let i = 0; i < 6; i++) {
           for (let j = 0; j < 6; j++) {
-            ctx!.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`;
-            ctx!.fillRect(180 + j * 25, i * 25, 25, 25);
+            ctx.fillStyle = `rgb(${Math.floor(255 - 42.5 * i)},${Math.floor(255 - 42.5 * j)},0)`;
+            ctx.fillRect(180 + j * 25, i * 25, 25, 25);
           }
         }
-        ctx!.update()
+        ctx.update()
       },
       drawRect() {
-        let ctx = uni.getElementById('draw-odd')!.getDrawableContext()
-        ctx!.reset()
+        let ctx = uni.getElementById('draw-odd')!.getDrawableContext()!
+        ctx.reset()
         // Create path
-        ctx!.moveTo(30, 90);
-        ctx!.lineTo(110, 20);
-        ctx!.lineTo(240, 130);
-        ctx!.lineTo(60, 130);
-        ctx!.lineTo(190, 20);
-        ctx!.lineTo(270, 90);
-        ctx!.closePath();
+        ctx.moveTo(30, 90);
+        ctx.lineTo(110, 20);
+        ctx.lineTo(240, 130);
+        ctx.lineTo(60, 130);
+        ctx.lineTo(190, 20);
+        ctx.lineTo(270, 90);
+        ctx.closePath();
 
         // Fill path
-        ctx!.fillStyle = "green";
-        ctx!.fill("evenodd");
-        ctx!.update()
+        ctx.fillStyle = "green";
+        ctx.fill("evenodd");
+        ctx.update()
 
       },
       drawArcTo() {
-        let ctx = uni.getElementById('draw-arcto')!.getDrawableContext()
-        ctx!.reset()
-        ctx!.beginPath();
-        ctx!.moveTo(50, 20);
-        ctx!.bezierCurveTo(230, 30, 150, 60, 50, 100);
-        ctx!.stroke();
+        let ctx = uni.getElementById('draw-arcto')!.getDrawableContext()!
+        ctx.reset()
+        ctx.beginPath();
+        ctx.moveTo(50, 20);
+        ctx.bezierCurveTo(230, 30, 150, 60, 50, 100);
+        ctx.stroke();
 
-        ctx!.fillStyle = "blue";
+        ctx.fillStyle = "blue";
         // start point
-        ctx!.fillRect(50, 20, 10, 10);
+        ctx.fillRect(50, 20, 10, 10);
         // end point
-        ctx!.fillRect(50, 100, 10, 10);
+        ctx.fillRect(50, 100, 10, 10);
 
-        ctx!.fillStyle = "red";
+        ctx.fillStyle = "red";
         // control point one
-        ctx!.fillRect(230, 30, 10, 10);
+        ctx.fillRect(230, 30, 10, 10);
         // control point two
-        ctx!.fillRect(150, 70, 10, 10);
-        ctx!.update()
+        ctx.fillRect(150, 70, 10, 10);
+        ctx.update()
       }
     }
   }