微信小程序手写签名

场景： 客户是做二手房的，二手房上架是需要平台和房主签订一个房源合同，需要在线签约，所以就有了这个需求。
其他的不多说，大家可以去小程序 ： web小白成长之旅 去看一下效果。

	<view class="content">
		<canvas class='firstCanvas'
				:height="getHeight"
		        canvas-id="firstCanvas"
		        @touchmove='move'
		        @touchend='end'
		        @error="error"
		        disable-scroll='true'
				
				>
				<!-- <cover-view class="qmmsg" v-if="isShowmsg" click="focused">请在空白处签名</cover-view> -->
		</canvas>
		<view class="operate-btn">
		  <view class="button" @click='clearClick()'>清除</view>
		  <view class="button" @click='saveClick()' >保存</view>
		</view>
	</view>

let content = null
	let touchs = []
	let canvasw = 0
	let canvash = 0
	export default{
		onLoad() {
			
		},
		compputed:{
			getHeight() {
				return `${uni.getSystemInfoSync().windowHeight-500}px`
			}
		},
		onShow() {
			// 建立画布
			content = uni.createCanvasContext('firstCanvas', this)
			this.drawBackground(content, '#fff', canvasw+1000, canvash+3000, -10, -10)
			console.log(canvasw,canvash)
			content.setStrokeStyle('#000000')
			content.setLineWidth(5)
			content.setLineCap('round')
			content.setLineJoin('round')
		},
		data(){
			return{
				isShowmsg:true
			}
		},
		methods:{
			error (e) {
				console.log(e)
			},
			move (e) {
			  let point = {x: e.touches[0].x, y: e.touches[0].y}
			  touchs.push(point)
			  if (touchs.length >= 2) {
			    this.draw(touchs)
			  }
			},
			end (e) {
			  for (let i = 0; i < touchs.length; i++) {
			    touchs.pop()
			  }
			},
			draw (touchs) {
					let point1 = touchs[0]
					let point2 = touchs[1]
					touchs.shift()
					content.moveTo(point1.x, point1.y)
					content.lineTo(point2.x, point2.y)
					content.stroke()
					content.draw(true)	
			},
			drawBackground (ctx, color = 'white', width = 1000, height = 3000, x = 0, y = 0) {
			  ctx.rect(x, y, width, height)
			  ctx.setFillStyle(color)
			  ctx.fill()
			},
			clearClick () {
				console.log(canvasw,canvash)
			  content.clearRect(0, 0, 1000, 3000)
			  content.draw(true)
			  content.beginPath();
			},
			saveClick () {
			  let that = this
			  wx.canvasToTempFilePath({
			    canvasId: 'firstCanvas',
			    success: function (res) {
			      console.log(res)
			      // 预览图片
				  let imgArr=[]
				  imgArr.push(res.tempFilePath);
			      		wx.previewImage({
			      			urls: imgArr,
			      			longPressActions: {
			      				itemList: ['发送给朋友', '保存图片', '收藏'],
			      				success: function(data) {
			      					console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
			      				},
			      				fail: function(err) {
			      					console.log(err.errMsg);
			      				}
			      			}
			      		});
				  
			    }
			  }, this)
			},
		}
	}