原生微信小程序canvas签名功能

半个月前百度搜出来的，没存书签现在不知道是哪篇文章了，再搜也没搜出来那篇文章，还好当时把代码复制到本地跑了一下，现在再发csdn存一下。

sign.js

Page({data: {ctx: null,width: null,height: null,drawCount: 0,drawState: "init"},onShow: function () {this.initCanvas()},initCanvas() {let {width,height} = this.datawidth = wx.getSystemInfoSync().windowWidthheight = wx.getSystemInfoSync().windowHeightconsole.log(wx.getSystemInfoSync())this.data.ctx = wx.createCanvasContext('canvas')this.setData({width,height})this.clearCanvas()},clearCanvas() {this.data.drawCount = 0this.data.drawState = "ing"this.data.ctx.setTextBaseline('top')this.data.ctx.setTextAlign('center')this.data.ctx.setFontSize(20)this.data.ctx.setFillStyle('#616165');this.data.ctx.fillText("请灰色区域内完成签名", this.data.width / 2, 30)this.data.ctx.draw(false)},catchtouchstart(e) {if (this.data.drawCount == 0) {this.data.ctx.draw(false)}this.data.drawCount++this.data.ctx.moveTo(e.changedTouches[0].clientX, e.changedTouches[0].clientY)},catchtouchmove(e) {if (this.data.drawState == "stop") returnthis.data.drawState = "ing"if (e.touches.length > 1) {return}this.data.ctx.setStrokeStyle('#000000');this.data.ctx.setLineWidth(3);this.data.ctx.setShadow(0, 0, 0.5, '#000000')this.data.ctx.setLineCap('round');this.data.ctx.setLineJoin('round');this.data.ctx.lineTo(e.changedTouches[0].clientX, e.changedTouches[0].clientY)this.data.ctx.stroke()this.data.ctx.draw(true)this.data.ctx.moveTo(e.changedTouches[0].clientX, e.changedTouches[0].clientY)},canvasToImg() {if (this.data.drawState == "init") returnthis.data.drawState = "stop"wx.canvasToTempFilePath({canvasId: 'canvas',success: res => {console.log(res.tempFilePath)// ...// 上传服务器wx.navigateTo({url: '/pages/showImg/showImg?src=' + res.tempFilePath,})}})}
})

sign.wxml

<canvas canvas-id="canvas" style="width:{{width+'px'}};height:{{height+'px'}}" catchtouchstart="catchtouchstart" catchtouchmove="catchtouchmove" catchtouchend="catchtouchend"></canvas>
<view class="btn-reset" catchtap="clearCanvas">重新绘制</view>
<view class="btn-ok" catchtap="canvasToImg">确认</view>

sign.wxss

page{position: relative;background-color: #f2f2f2;width: 100%;height: 100%;
}
canvas{width: 100%;height: 100vh;
}
.btn-reset{width: 100rpx;position: absolute;bottom: 10rpx;right: 160rpx;padding: 8rpx;text-align: center;border: 1rpx solid #4965B3;color: #4965B3;font-size: 18rpx;border-radius: 8rpx;box-sizing: border-box;
}
.btn-ok{width: 100rpx;position: absolute;bottom: 10rpx;right: 30rpx;padding: 8rpx;text-align: center;background-color: #4965B3;border: 1rpx solid #4965B3;color: #fff;font-size: 18rpx;border-radius: 8rpx;box-sizing: border-box;
}

sign.json