uniapp签字版

大小自己根据实际情况自己改

直接上代码

<template>
	<view>
		<canvas style="width: 300px; height: 200px;border: 1px solid;"
		 canvas-id="firstCanvas1" 
		 id="firstCanvas1"
		 @touchstart="handleTouchStart"
		  @touchmove="handleTouchMove"
		   @touchend="handleTouchEnd"
		 ></canvas>
	</view>
</template>

<script>
	let context1= null;
	export default {
		
		name:"llt_signature",
	
		data() {
			return {
				canvasData:[]
			};
		},
		watch: {
			canvasData() {
				if(!this.canvasData.length){
					return
				}
				context1.moveTo(this.canvasData[0].x, this.canvasData[0].y)
			
				for (let i = 0; i < this.canvasData.length; i++) {
					context1.lineTo(this.canvasData[i].x, this.canvasData[i].y)
				}
				context1.stroke()
				context1.draw(true)
			}
		},
		created() {
			context1= uni.createCanvasContext('firstCanvas1',this)
			context1.setLineWidth(1)
			context1.setStrokeStyle("#000000")
		},
		methods:{
			handleTouchStart(e) {
			this.canvasData=[]
				const a = e.changedTouches[0]
				this.canvasData.push({
					x: a.x,
					y: a.y
				})
			},
			handleTouchMove(e) {
				const a = e.changedTouches[0]
				this.canvasData.push({
					x: a.x,
					y: a.y
				})
			},
			handleTouchEnd(e) {
				const a = e.changedTouches[0]
				this.canvasData.push({
					x: a.x,
					y: a.y
				})
				this.$emit('canvasDataChange',this.canvasData)
			},
			handleEnd() {
				
				context1.stroke()
				context1.draw(true)
				
			},
		}
	}
</script>

<style lang="scss">

</style>