其实随意搜索一下还是有很多先例的，只是有些比较坑得自己筛选。https://blog.csdn.net/qq_36875339/article/details/81086205这篇文章真是好，以至于我想给赞赏canvasclass"canvas"id"canvas"canvas-id"canvas"disable-scroll"true"bindtouchstart"canvasStart"bindtouchmove"canvasMove"bindtouchend"canvasEnd"touchcancel"canvasEnd"binderror"canvasIdErrorCallback"/canvas复制代码复制代码这便是简单雏形了。复制代码代码可以参考这里：复制代码http://www.wxapp-union.com/portal.php?modviewaid2538复制代码Tips:这些方法最好不要放在外面，还是放在methods里面比较好。不然会给你警告，搞得一脸懵逼。说你canvasMovehasnotdefined...复制代码//canvas全局配置varcontextnull;//使用wx.createContext获取绘图上下文contextvarisButtonDownfalse;vararrx[];vararry[];vararrz[];varcanvasw0;varcanvash0;//获取系统信息wx.getSystemInfo({success:function(res){canvaswres.windowWidth;//设备宽度canvashres.windowWidth*7/15;}});//注册页面Page({canvasIdErrorCallback:function(e){console.error(e.detail.errMsg)},canvasStart:function(event){isButtonDowntrue;arrz.push(0);arrx.push(event.changedTouches[0].x);arry.push(event.changedTouches[0].y);//context.moveTo(event.changedTouches[0].x,event.changedTouches[0].y);},canvasMove:function(event){if(isButtonDown){arrz.push(1);arrx.push(event.changedTouches[0].x);arry.push(event.changedTouches[0].y);//context.lineTo(event.changedTouches[0].x,event.changedTouches[0].y);//context.stroke();//context.draw()};for(vari0;iarrx.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){isButtonDownfalse;},cleardraw:function(){//清除画布arrx[];arry[];arrz[];context.clearRect(0,0,canvasw,canvash);context.draw(true);},getimg:function(){if(arrx.length0){wx.showModal({title:'提示',content:'签名内容不能为空！',showCancel:false});returnfalse;};//生成图片wx.canvasToTempFilePath({canvasId:'canvas',success:function(res){console.log(res.tempFilePath);//存入服务器wx.uploadFile({url:'a.php',//接口地址filePath:res.tempFilePath,name:'file',formData:{//HTTP请求中其他额外的formdata'user':'test'},success:function(res){console.log(res);},fail:function(res){console.log(res);},complete:function(res){}});}})},/***页面的初始数据*/data:{src:""},/***生命周期函数--监听页面加载*/onLoad:function(options){//使用wx.createContext获取绘图上下文contextcontextwx.createCanvasContext('canvas');context.beginPath()context.setStrokeStyle('#000000');context.setLineWidth(4);context.setLineCap('round');context.setLineJoin('round');}})复制代码复制代码这里逻辑是这样的：复制代码1.首先用canvas实现画图，然后用wx.canvasToTempFilePath拿到res.tempFilePath(这是暂时存储的地址，不可以直接打开的)复制代码2.其次用wx.getFileSystemManager().readFile({filePath:res.tempFilePaths,//选择图片返回的相对路径encoding:'base64',//编码格式success:res{//成功的回调console.log('data:image/png;base64,'+res.data)———这个就是可以直接打开的base64的图片，存储在本地的。}})3.最后，把这个地址存到vuex,哪里都可以用啦。复制代码复制代码（由于特别原因不能完全贴代码，但是这是实际项目，没毛病～）复制代码复制代码