diff --git a/pages/component/view/view-draw.uvue b/pages/component/view/view-draw.uvue
index 32aeeacd6d00ed5a0224995ff29c630a407cec29..6664010bd404fbe1c0e846ac530b5ea2789bbadf 100644
--- a/pages/component/view/view-draw.uvue
+++ b/pages/component/view/view-draw.uvue
@@ -17,7 +17,6 @@
 </template>
 
 <script>
-	import DrawableContext from 'io.dcloud.uniapp.runtime.DrawableContext';
 	var y = 160
 	export default {
 		data() {
@@ -61,7 +60,7 @@
 				let width = node.getBoundingClientRect().width
 				ctx!!.reset()
 				ctx!!.font = "15px"
-				ctx.textAlign = "center"
+				ctx!.textAlign = "center"
 				for (var i = 0; i < this.texts.length; i++) {
 					let value = this.texts[i]
 					if (i % 2 == 0) {
@@ -78,45 +77,45 @@
 				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
 				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;
-				drawDashedLine([], ctx);
-				drawDashedLine([2, 2], ctx);
-				drawDashedLine([10, 10], ctx);
-				drawDashedLine([20, 5], ctx);
-				drawDashedLine([15, 3, 3, 3], ctx);
-				drawDashedLine([20, 3, 3, 3, 3, 3, 3, 3], ctx);
-				ctx.lineDashOffset = 18;
-				drawDashedLine([12, 3, 3], ctx);
-				ctx.lineDashOffset = 0
-				ctx.setLineDash([0])
+				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) {
@@ -141,12 +140,12 @@
 						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();
 						}
 					}
 				}
@@ -168,44 +167,44 @@
 				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!.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 {
@@ -230,18 +229,18 @@
 				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!.beginPath();
+				ctx!.moveTo(50, 140);
+				ctx!.lineTo(150, 60);
+				ctx!.lineTo(250, 140);
+				ctx!.closePath();
+				ctx!.stroke();
 				ctx!!.update()
 			},
 			drawPoint() {
@@ -250,15 +249,15 @@
 				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!.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!.fillRect(180 + j * 25, i * 25, 25, 25);
 					}
 				}
 				ctx!!.update()
@@ -268,16 +267,16 @@
 				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!.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!.fillStyle = "green";
+				ctx!.fill("evenodd");
 				ctx!!.update()
 
 			}
@@ -287,4 +286,4 @@
 
 <style>
 
-</style>
\ No newline at end of file
+</style>