uniapp实现canvas签名

效果图：

 

需求：

用户需在小程序中使用手写的方式签字或签名

使用：

<template>
	 <view class="signature-box">
	         
	 		<!-- 签名 -->
	 		<view class="signature">
	 			<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
	 			<view class="footer">
	 				<button @click="finish" type="primary" ripple-bg-color="#909399">保存</button>
	 				<button @click="clear" type="warning" ripple-bg-color="#909399">清除</button>
	 				<button @click="close" type="error" ripple-bg-color="#909399">关闭</button>
	 			</view>
	 		</view>
	                 
	                 
	                 <!-- 签完名后生成的图片 -->
	 		<view v-show="SignatureImg" class="SignatureImg"><image :src="SignatureImg" mode=""></image></view>
	                 
	                  <!-- 清除签完名后生成的图片 -->
	 		<u-button v-show="SignatureImg" @click="obliterate" type="error" :plain="true" :ripple="true" ripple-bg-color="#909399" size="medium">清除签名</u-button>
	 	</view>
</template>

<script>
	var x = 20;
	var y = 20;
	export default {
		data() {
			return {
				//绘图图像
				ctx: '', 
				//路径点集合
				points: [], 
				//签名图片
				SignatureImg: ''
			};
		},
		props: ['showCanvas'],
		methods: {
			//清除签名的图片
			obliterate() {
				if (this.SignatureImg) {
					this.SignatureImg = '';
				}
				this.close();
			},
			//关闭并清空画布
			close() {
				this.$emit('closeCanvas');
				this.clear();
			},
			//创建并显示画布
			createCanvas() {
				this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
				//设置画笔样式
				this.ctx.lineWidth = 4;
				this.ctx.lineCap = 'round';
				this.ctx.lineJoin = 'round';
			},
			//触摸开始，获取到起点
			touchstart(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = { X: startX, Y: startY };
				this.points.push(startPoint);
				//每次触摸开始，开启新的路径
				this.ctx.beginPath();
			},
			//触摸移动，获取到路径点
			touchmove(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = { X: moveX, Y: moveY };
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
			},
			// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
			touchend() {
				this.points = [];
			},
			//绘制笔迹
			draw() {
				let point1 = this.points[0];
				let point2 = this.points[1];
				this.points.shift();
				this.ctx.moveTo(point1.X, point1.Y);
				this.ctx.lineTo(point2.X, point2.Y);
				this.ctx.stroke();
				this.ctx.draw(true);
			},
			//清空画布
			clear() {
				console.log("清空")
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.ctx.clearRect(0, 0, canvasw, canvash);
						that.ctx.draw(true);
					}
				});
			},
			//完成绘画并保存到本地
			finish() {
				console.log('保存')
				let that = this;
				uni.canvasToTempFilePath(
					{
						canvasId: 'mycanvas',
						success: function(res) {
							console.log('------------------')
							console.log(res);
							that.SignatureImg = res.tempFilePath;
							that.$emit('closeCanvas');
							that.close();
						}
					},
				);
			}
		},
		mounted() {
			this.createCanvas();
		}
	};
</script>

<style lang="less" scoped>
.signature-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #fff;
	//签名模块
	.signature {
		position: fixed;
		top: 10px;
		left: 2%;
		z-index: 999;
		width: 96%;
		//canvas
		.mycanvas {
			width: 100%;
			height: calc(100vh - 200upx);
			background-color: #ececec;
		}
		//底部按钮
		.footer {
			font-size: 14px;
			height: 150upx;
			display: flex;
			justify-content: space-around;
			align-items: center;
		}
	}
	//生成的图片
	.SignatureImg {
		image {
			width: 750rpx;
			height: 750rpx;
		}
	}
}
</style>