canvas 添加个简单如涂鸦页面

pages.json

@@ -470,6 +470,14 @@
 				"navigationBarTitleText": "ball"
 			}
 		},
+    {
+      "path" : "pages/component/canvas/canvas/doodle",
+      "group": "0,7",
+      "style" :
+      {
+        "navigationBarTitleText" : "涂鸦"
+      }
+    },
 		// #ifndef WEB
 		{
 			"path": "pages/component/animation-view/animation-view",
@@ -2724,4 +2732,4 @@
 			]
 		}
 	]
-}
\ No newline at end of file
+}

pages/component/canvas/canvas/doodle.uvue

+<template>
+	<canvas class="drawing" id="tablet" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd"></canvas>
+	<button @click="doClear()">清空</button>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				lastPointX : 0,
+				lastPointY : 0
+			}
+		},
+		onShow() {
+		},
+
+		onReady() {
+			let element = uni.getElementById('tablet') as UniCanvasElement
+			let ctx = element.getContext("2d")
+      if ( ctx != null) {
+          const dpr = uni.getDeviceInfo().devicePixelRatio ?? 1;
+          element.width = element.offsetWidth * dpr
+          element.height = element.offsetHeight * dpr
+          ctx.scale(dpr, dpr)
+      }
+		},
+		methods: {
+			touchStart(event: TouchEvent){
+				let element = uni.getElementById('tablet') as UniCanvasElement
+				const elRect = element.getBoundingClientRect();
+				const touch = event.touches[0];
+				const x = touch.clientX - elRect.left
+				const y = touch.clientY - elRect.top
+				this.lastPointX = x
+				this.lastPointY = y
+
+			},
+			touchMove(event: TouchEvent){
+				let element = uni.getElementById('tablet') as UniCanvasElement
+				const elRect = element.getBoundingClientRect();
+				const touch = event.touches[0];
+				const x = touch.clientX - elRect.left
+				const y = touch.clientY - elRect.top
+
+				let ctx = element.getContext("2d")
+        if ( null != ctx) {
+          ctx.lineWidth = 5;
+          ctx.lineCap = "round";
+          ctx.lineJoin = "square";
+          ctx.beginPath()
+          ctx.moveTo(this.lastPointX, this.lastPointY)
+          ctx.lineTo(x, y)
+          ctx.stroke()
+        }
+
+				this.lastPointX = x
+				this.lastPointY = y
+			},
+			touchEnd(event: TouchEvent){
+
+			},
+			doClear(){
+				let element = uni.getElementById('tablet') as UniCanvasElement
+				let ctx = element.getContext("2d")
+        if (null != ctx ) {
+          ctx.clearRect(0, 0, element.width, element.height)
+        }
+			}
+		}
+	}
+</script>
+
+<style>
+	.drawing {
+		width: 100%;
+		height: 500px;
+		background-color: lightgray;
+		margin-bottom: 15px;
+	}
+</style>