场景： 客户是做二手房的，二手房上架是需要平台和房主签订一个房源合同，需要在线签约，所以就有了这个需求。 其他的不多说，直接上代码吧。 可以先看下小程序的效果再来看代码 （手写签名）
<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)
},
}
}
`
以上就是一个简单的手写签名了，如果有兴趣可以去 小程序里面看看
