场景分析在小程序业务中如需用户进行手写签名的场景如：寄快递，签约合同时需要在小程序中进行手写签名。 处理方法 实现原理运用 canvas 监听用户 touch 事件，然后在 canvas 上画出与 touch 事件相近的线模仿手写签名效果。 实现方法参考如下代码片段：https://developers.weixin.qq.com/s/MYDTQAmR7EIa [图片]

布局文件： <view class="container column-me">   <view class="tips">     请绘制清晰可见的签名并保存   </view>   <canvas class="canvas" id="canvas" type="2d" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>   <view class='addBtn'>     <button type="default" class='txt reset' bindtap="clickClear">重新签名</button>     <button type="default" class='txt' bindtap="clickSave">保存签名</button>   </view> </view> 样式文件： page {   background: #fff; }   .container {   padding: 0 20rpx;   height: 100vh;   background: #fff;   border-radius: 5px; }   .canvas {   width: 100%;   flex: 1;   box-sizing: border-box;   margin-top: 10rpx; }   .tips {   display: flex;   align-items: center;   justify-content: center;   text-align: center;   color: #aaa;   font-size: 20rpx; }   .addBtn {   display: flex;   align-items: center;   justify-content: center;   width: 100%;   background: #fff;   z-index: 100;   padding: 10rpx 0; }   .addBtn .txt {   text-align: center;   width: 200rpx;   font-size: 15rpx;   border-radius: 100px;   background: #0097fe;   color: #fff;   box-sizing: border-box;   margin: 0 20rpx;   padding: 10px;   z-index: 100; }   .reset {   background: #fff !important;   border: 1px solid #cccccc;   color: #333333 !important; } 配置文件： {   "usingComponents": {},   "pageOrientation": "landscape",   "navigationBarTitleText": "医生签名" } JS文件： let http = require("../../utils/http.js"); // canvas 全局配置 var context = null; // 使用 wx.createContext 获取绘图上下文 context var mCanvas = null; //注册页面 Page({     /**    * 页面的初始数据    */   data: {     userId: '', //用户id     hasDraw: false, //默认没有画   },     /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {     this.setData({       userId: options.scene,       hasDraw: false,     })     wx.createSelectorQuery()       .select('#canvas') // 在 WXML 中填入的 id       .fields({         node: true,         size: true       })       .exec((res) => {         // Canvas 对象         const canvas = res[0].node         mCanvas = res[0].node         // 渲染上下文         context = canvas.getContext('2d')         // Canvas 画布的实际绘制宽高         const width = res[0].width         const height = res[0].height         // 初始化画布大小         const dpr = wx.getWindowInfo().pixelRatio         canvas.width = width * dpr         canvas.height = height * dpr         context.scale(dpr, dpr)         //绘制背景         context.fillStyle = '#fff'         context.clearRect(0, 0, canvas.width, canvas.height)         context.fillRect(0, 0, canvas.width, canvas.height)       })   },   onShow() {     },   canvasIdErrorCallback: function (e) {},   //开始   canvasStart: function (event) {     context.moveTo(event.touches[0].x, event.touches[0].y);   },   //过程   canvasMove: function (event) {     var x = event.touches[0].x;     var y = event.touches[0].y;     context.lineWidth = 4     context.lineCap = 'round'     context.lineJoin = 'round'     context.lineTo(x, y);     context.stroke();     this.setData({       hasDraw: true,     });   },   canvasEnd: function (event) {     },   clickClear: function () {     context.clearRect(0, 0, mCanvas.width, mCanvas.height); //清除画布     context.beginPath() //清空画笔     this.setData({       hasDraw: false,     });   },   //保存签名   clickSave: function () {     let that = this     if (!this.data.hasDraw) {       wx.showModal({         title: '提示',         content: '签名内容不能为空！',         showCancel: false       });       return false;     };     if (this.data.userId === undefined || this.data.userId === '') {       wx.showModal({         title: '提示',         content: '用户id为空，请重新扫码',         showCancel: false       });       return false;     }     //生成图片     wx.canvasToTempFilePath({       canvas: mCanvas,       success: function (res) {         http.upload({           url: '/admin/upload/upLoadFile',           filePath: res.tempFilePath,           name: 'file',           formData: {},           callBack: function (uploadRes) {             let res = JSON.parse(uploadRes)             let url = res.data.url             http.request({               url: "/doctor/home/updateSignature",               method: "POST",               noBody: true,               data: {                 id: that.data.userId,                 image: url,               },               callBack: (res) => {                 wx.showModal({                   title: '温馨提示',                   content: '保存签名成功！',                   confirmText: '退出',                   showCancel: false,                   success(res) {                     if (res.confirm) {                       wx.exitMiniProgram({                         success: function (res) {                           console.log(res)                         },                         fail: function (err) {                           console.log(err)                         }                       })                     } else if (res.cancel) {                       console.log('用户点击取消')                     }                   }                 })               }             })           }         })       }     })   },   })