布局文件：

<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('用户点击取消')
                    }
                  }
                })
              }
            })
          }
        })
      }
    })
  },
 
})