微信小程序canvas画板手写签名

// 注意两点 一、canvash 变量，主要控制签名操作画布尺寸，设置不当超出一屏会出现问题；二、撤销重绘时 因绘制机制 所以需要要用.slice(0)重新定义数组 // canvas 全局配置 var context = null;// 使用 wx.createContext 获取绘图上下文 context var isButtonDown = false; var arrx = []; var arry = []; var arrz = []; var canvasw = 0; var canvash = 0; var history = [] var canvasNnm = 0 const app = getApp() //注册页面 Page({ data: { pageNumebers: 0, name: [] }, onLoad: function (options) { let vm = this let name = '你好你好你' let namearr = [] for (var i = 0; i < name.length; i++) { namearr.push(name.substr(i, 1)) } this.setData({ name: namearr }) //获取系统信息 wx.getSystemInfo({ success: function (res) { canvasw = res.windowWidth;//设备宽度 canvash = (parseInt(res.windowHeight / 3) + 1) * vm.data.name.length } }); }, onReady() { // 使用 wx.createContext 获取绘图上下文 context context = wx.createCanvasContext('canvas'); context.beginPath() context.setStrokeStyle('#000000'); context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); }, canvasIdErrorCallback: function (e) { console.error(e.detail.errMsg) }, //开始解除屏幕 canvasStart: function (event) { isButtonDown = true; arrz.push(0); arrx.push(event.changedTouches[0].x); arry.push(event.changedTouches[0].y); }, //签字过程 canvasMove: function (event) { if (isButtonDown) { arrz.push(1); arrx.push(event.changedTouches[0].x); arry.push(event.changedTouches[0].y); }; for (var i = 0; i < arrx.length; i++) { if (arrz[i] == 0) { context.moveTo(arrx[i], arry[i]) } else { context.lineTo(arrx[i], arry[i]) }; }; context.clearRect(0, 0, canvasw, canvash); context.setStrokeStyle('#000000'); context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); context.stroke(); context.draw(false); }, //每次签字结束，断笔 canvasEnd: function (event) { isButtonDown = false; canvasNnm = canvasNnm + 1 var obj = JSON.stringify({ a: canvasNnm, arrz: arrz, arrx: arrx, arry: arry }) history.push(JSON.parse(obj)) console.log(history) }, //撤销操作 chexiao() { canvasNnm = canvasNnm - 1 < 0 ? 0 : canvasNnm - 1 if (canvasNnm == 0) { this.cleardraw() return }; console.log(canvasNnm) arrx = history[canvasNnm - 1].arrx.slice(0) arry = history[canvasNnm - 1].arry.slice(0) arrz = history[canvasNnm - 1].arrz.slice(0) for (var i = 0; i < arrx.length; i++) { if (arrz[i] == 0) { context.moveTo(arrx[i], arry[i]) } else { context.lineTo(arrx[i], arry[i]) } }; context.setStrokeStyle('#000000'); context.setLineWidth(4); context.setLineCap('round'); context.setLineJoin('round'); context.clearRect(0, 0, canvasw, canvash); context.stroke(); context.draw(false); console.log(canvasNnm) history.splice(canvasNnm, 1) console.log("history", history) }, //清空面板 cleardraw: function () { history = [] canvasNnm = 0 //清除画布 arrx = []; arry = []; arrz = []; context.clearRect(0, 0, canvasw, canvash); context.draw(true); }, //导出图片 getimg: function () { let vm = this if (arrx.length == 0) { wx.showModal({ title: '提示', content: '签名内容不能为空！', showCancel: false }); return false; }; //生成图片 wx.canvasToTempFilePath({ canvasId: 'canvas', success: function (res) { console.log(res.tempFilePath); vm.setData({ img: res.tempFilePath }) } }) }, prev() { let vm = this if (vm.data.pageNumebers == 0) return this.setData({ pageNumebers: vm.data.pageNumebers - 1 }) console.log("history", history) }, next() { let vm = this let num = 5 let pagenum = num / 3 == 0 ? num / 3 : parseInt(num / 3) + 1 if (pagenum == vm.data.pageNumebers + 1) return this.setData({ pageNumebers: vm.data.pageNumebers + 1 }) console.log("history", history) } })