在微信小程序上实现手写签名，获取新版和旧版canvascontext有点tricky。如果新版本获取canvas后页面滑动，签名坐标会出现异常（微信开发者工具上会出现2022-2-17），但是在真机上滑动也不会出现异常。为了防止出现问题，暂时使用旧版本获取canvascontext1。效果图2.相关代码1.Canvas代码新版2dcanvas旧版画布2.js相关获取新版本2d画布对象constquery=uni.createSelectorQuery().in(this);query.select('.canvas').node(res=>{const{_width,_height}=res.node;/*获取画布wxml节点*/this.canvas=res.node;this.canvasWidth=_width;this.canvasHeight=_height;/*获取画布2dcontext*/this.canvasContext=this.canvas.getContext('2d');/*缩放以设置画布大小以防止手写错位*/constratio=wx.getSystemInfoSync().pixelRatio;this.canvas.width=this.canvasWidth*ratio;this.canvas.height=this.canvasHeight*ratio;这个.canvas上下文。规模（比率，比率）；/*设置线条颜色*/this.canvasContext.strokeStyle='#2A2A2A';/*设置线条粗细*/this.canvasContext.lineWidth=4;/*设置线条的终点样式*/this.canvasContext.lineCap='round';}).exec()缩放设置画布的大小，防止手写错位。这与页面滑动无关。如果不设置，也会造成坐??标错位。constratio=wx.getSystemInfoSync().像素比率；this.canvas.width=this.canvasWidth*ratio;this.canvas.height=this.canvasHeight*ratio;this.canvasContext.scale（比率，比率）；老版本获取canvasthis.canvasContext=uni.createCanvasContext('canvas',this);/*设置线条颜色*/this.canvasContext.setStrokeStyle('#2A2A2A');/*设置线条粗细*/this.canvasContext.setLineWidth(4);/*设置直线的终点样式*/this.canvasContext.setLineCap('round');签名js方法，新版和老版的区别只有一个draw，新版不需要使用draw方法/*Touchstart*/handleTouchStart(e){this.drawStartX=e.changedTouches[0]。X;this.drawStartY=e.changedTouches[0].y;this.canvasContext.beginPath();},/*触摸移动*/handleTouchMove(e){/*记录当前位置*/consttempX=e.changedTouches[0].x;consttempY=e.changedTouches[0].y;/*画线*/this.canvasContext.moveTo(this.drawStartX,this.drawStartY);this.canvasContext.lineTo(tempX,tempY);this.canvasContext.stroke();/*旧的绘制方法，新版本不需要绘制*/this.canvasContext.draw(true);/*重新记录起始位置*/this.drawStartX=tempX;this.drawStartY=tempY;},/*触摸结束*/handleTouchEnd(e){this.canvasContext.save();},/*触摸取消*/handleTouchCancel(e){this.canvasContext.save();},/*清空canvas*/clearCanvas(){this.canvasContext.clearRect(0,0,this.canvasWidth,this.canvasHeight);},canvas生成本地图片（我这里封装了组件，需要通过inthis防止this指向异常)/*生成签名图片*/ggenerateSignImage(){returnnewPromise((resolve,reject)=>{uni.canvasToTempFilePath({x:0,y:0,//canvas:this.canvas,//新版本canvasId:'canvas',//旧版本版本使用idwidth:this.canvasWidth,height:this.canvasHeight,destWidth:this.canvasWidth,destHeight:this.canvasHeight,fileType:'png',quality:1,success:res=>{resolve(res.tempFilePath)},fail:err=>{reject(err);}},this)})}，新版canvas主要区分canvaswxml节点和canvas上下文，而旧版只有一个canvas上下文做所有事情操作。生成图片时，新版是传入wxml对象，旧版是传入唯一的canvasId。新版canvas取消了draw方法，努力学习中。如果对你的学习有帮助，就留下你的印记吧（点赞^_^）往期推荐：实现单行和多行文本，超出部分加省略号判断iOS、Android、PC使用Vue开发移动端管理后台画三角形微信小程序使用车牌号输入法
