微信小程序popup弹出框内手写签名

wxml

<view class="page" page-style="{{ showWritten ? 'overflow: hidden;' : '' }}" >
  <view>这里是很多很多的内容。。。</view>
  <view bind:tap="handWrittenSign">去签字</view>
  <van-image width="200rpx" height="200rpx" src="{{ writtenUrl }}" />
</view>


<!-- 签字弹窗 -->
  <van-popup show="{{ showWritten }}" position="bottom" custom-class="writtenArea" bind:close="writtenSignClose" bind:touchstart>
    <view class="agree-area">
        <text>请签字</text>
    </view>
    <canvas canvas-id="myCanvas" disable-scroll="true" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd" class="canvas-area"></canvas>
    <view class="written-btn-area">
        <van-button type="default" custom-class="write" bindtap="resetWrite" size="small">重置</van-button>
        <van-button plain type="info" custom-class="write" bindtap="cancelWrite" size="small">取消</van-button>
        <van-button type="info" custom-class="write" bindtap="confirmWrite" size="small">确认</van-button>
    </view>
</van-popup>

js

//定义属性：
    writtenUrl: '', //签名图片地址
    showWritten: false, //写字板弹窗
    startX: undefined, // 线条的坐标点
    startY: undefined,
    userSignatureId: undefined, // 签名图片id
    screenWidth: undefined, // 屏幕宽
    screenHeight: undefined, // 屏幕高



  // 点击弹出手写签名弹框
  handWrittenSign() {
    this.setData({ 
      showWritten: true,
      writtenUrl: '' 
    });
    this.initCanvas();
  },

  // 点击蒙层关闭弹框
  writtenSignClose() {
      this.setData({ showWritten: false });
      this.resetWrite();
  },

  // 初始化画布
  initCanvas() {
      const context = wx.createCanvasContext('myCanvas', this);
      context.setStrokeStyle('#000'); // 设置线条样式
      context.setLineWidth(3); // 线条粗细
      context.setLineCap('round'); // 设置线条端点样式
      context.setLineJoin('round'); // 设置线条交点样式（拐角）
      context.beginPath(); // 开始新的绘制路径
      context.clearRect(0, 0, this.data.startX, this.data.startY); // 清除画布上的内容
      context.draw(); // 绘制到canvas上
  },
  // 手指触摸动作开始
  onTouchStart(e) {
      const context = wx.createCanvasContext('myCanvas', this);
      context.setStrokeStyle('#000000');
      context.setLineWidth(3);
      this.setData({
          'startX': e.touches[0].x,
          'startY': e.touches[0].y,
      })
  },

  // 手指触摸后移动
  onTouchMove(e) {
      const context = wx.createCanvasContext('myCanvas', this);
      context.moveTo(this.data.startX, this.data.startY);
      context.lineTo(e.touches[0].x, e.touches[0].y);
      context.stroke();
      context.draw(true);
      
      this.setData({
          'startX': e.touches[0].x,
          'startY': e.touches[0].y,
      })
  },

  // 手指触摸动作结束
  onTouchEnd() {
      const context = wx.createCanvasContext('myCanvas', this);
      context.closePath();
      context.draw(true);
  },

  touchstart(){},

  // 重置签名
  resetWrite() {
    console.log("清空画布")
      const context = wx.createCanvasContext('myCanvas', this);
      let { screenWidth, screenHeight } = this.data;
      // 清空画布
      context.clearRect(0, 0, screenWidth, screenHeight);
      context.beginPath();
      // 绘制白色背景
      context.setFillStyle('#ffffff'); // 填充色 白色
      context.fillRect(0, 0, screenWidth, screenHeight); // 绘制一个矩形清除画布内容
      context.setLineWidth(3);  // 线条粗细
      // 绘制提示文字（根据需求可要可不要）
      context.setFontSize(14);
      context.setFillStyle('#999999');
      context.setTextAlign('center');
      context.fillText('请在此区域签名', this.data.startX / 2, this.data.startY / 2);
      // 绘制到canvas上
      context.draw();
  },

  // 取消签名
  cancelWrite() {
      this.setData({ 
          showWritten: false
      })
      const context = wx.createCanvasContext('myCanvas', this);
      let { screenWidth, screenHeight } = this.data;
      // 清空画布
      context.clearRect(0, 0, screenWidth, screenHeight);
      context.beginPath();
      context.setFillStyle('#ffffff');
      context.fillRect(0, 0, screenWidth, screenHeight);
      context.setLineWidth(3);
      // 绘制到canvas上
      context.draw();
  },

  // 手写板确认提交
  confirmWrite() {
    this.setData({showWritten: false});  // 关闭手写面板
    const that = this;
      wx.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success(res) {
            let tempFilePath = res.tempFilePath; // 取图片文件路径
            // console.log('图片地址: ',tempFilePath)
            // 将 tempFilePath 发送到后台
            // 此处省略。。。
          }
      });
  },  

wxss

/* 签字版样式开始 */
.writtenArea {
  width:100%;
  height: 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.canvas-area {
  width: 90%;
  flex: 1;
  border: 1px solid #ccc;
  padding: 10rpx;
}
.write {
  width: 180rpx;
}
.written-btn-area {
  width: calc(100% - 70rpx);
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  margin: 30rpx 0;
}
.agree-area {
  width: 90%;
  margin: 20rpx 0;
  text-align: left;
  font-size: 36rpx;
  font-weight: 700;
}

json

{
  "navigationBarTitleText": "信息",
  "usingComponents": {
    "van-image": "@vant/weapp/image/index",
    "van-button": "@vant/weapp/button/index",
    "van-popup": "@vant/weapp/popup/index"
  }
}

大神文章实测有效，链接在这【点击】

实测之后做了点小的改动

1. page-style及canvas标签上添加 disable-scroll="true"，可以防止签字时页面滚动
2. 开发者工具上正常书写，到真机的时候就写不上文字了，删除掉原文章canvas标签上的type="3d"就可以了