wxml

<view class="page" page-style="{{ showWritten ? 'overflow: hidden;' : '' }}" >
  <view>這里是很多很多的內(nèi)容。。。</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>請(qǐng)簽字</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">確認(rèn)</van-button>
    </view>
</van-popup>

js

//定義屬性：
    writtenUrl: '', //簽名圖片地址
    showWritten: false, //寫(xiě)字板彈窗
    startX: undefined, // 線條的坐標(biāo)點(diǎn)
    startY: undefined,
    userSignatureId: undefined, // 簽名圖片id
    screenWidth: undefined, // 屏幕寬
    screenHeight: undefined, // 屏幕高



  // 點(diǎn)擊彈出手寫(xiě)簽名彈框
  handWrittenSign() {
    this.setData({ 
      showWritten: true,
      writtenUrl: '' 
    });
    this.initCanvas();
  },

  // 點(diǎn)擊蒙層關(guān)閉彈框
  writtenSignClose() {
      this.setData({ showWritten: false });
      this.resetWrite();
  },

  // 初始化畫(huà)布
  initCanvas() {
      const context = wx.createCanvasContext('myCanvas', this);
      context.setStrokeStyle('#000'); // 設(shè)置線條樣式
      context.setLineWidth(3); // 線條粗細(xì)
      context.setLineCap('round'); // 設(shè)置線條端點(diǎn)樣式
      context.setLineJoin('round'); // 設(shè)置線條交點(diǎn)樣式（拐角）
      context.beginPath(); // 開(kāi)始新的繪制路徑
      context.clearRect(0, 0, this.data.startX, this.data.startY); // 清除畫(huà)布上的內(nèi)容
      context.draw(); // 繪制到canvas上
  },
  // 手指觸摸動(dòng)作開(kāi)始
  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,
      })
  },

  // 手指觸摸后移動(dòng)
  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,
      })
  },

  // 手指觸摸動(dòng)作結(jié)束
  onTouchEnd() {
      const context = wx.createCanvasContext('myCanvas', this);
      context.closePath();
      context.draw(true);
  },

  touchstart(){},

  // 重置簽名
  resetWrite() {
    console.log("清空畫(huà)布")
      const context = wx.createCanvasContext('myCanvas', this);
      let { screenWidth, screenHeight } = this.data;
      // 清空畫(huà)布
      context.clearRect(0, 0, screenWidth, screenHeight);
      context.beginPath();
      // 繪制白色背景
      context.setFillStyle('#ffffff'); // 填充色 白色
      context.fillRect(0, 0, screenWidth, screenHeight); // 繪制一個(gè)矩形清除畫(huà)布內(nèi)容
      context.setLineWidth(3);  // 線條粗細(xì)
      // 繪制提示文字（根據(jù)需求可要可不要）
      context.setFontSize(14);
      context.setFillStyle('#999999');
      context.setTextAlign('center');
      context.fillText('請(qǐng)?jiān)诖藚^(qū)域簽名', 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;
      // 清空畫(huà)布
      context.clearRect(0, 0, screenWidth, screenHeight);
      context.beginPath();
      context.setFillStyle('#ffffff');
      context.fillRect(0, 0, screenWidth, screenHeight);
      context.setLineWidth(3);
      // 繪制到canvas上
      context.draw();
  },

  // 手寫(xiě)板確認(rèn)提交
  confirmWrite() {
    this.setData({showWritten: false});  // 關(guān)閉手寫(xiě)面板
    const that = this;
      wx.canvasToTempFilePath({
          canvasId: 'myCanvas',
          success(res) {
            let tempFilePath = res.tempFilePath; // 取圖片文件路徑
            // console.log('圖片地址: ',tempFilePath)
            // 將 tempFilePath 發(fā)送到后臺(tái)
            // 此處省略。。。
          }
      });
  },  

wxss

/* 簽字版樣式開(kāi)始 */
.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"
  }
}

大神文章實(shí)測(cè)有效，鏈接在這【點(diǎn)擊】

實(shí)測(cè)之后做了點(diǎn)小的改動(dòng)

1. page-style及canvas標(biāo)簽上添加 disable-scroll="true"，可以防止簽字時(shí)頁(yè)面滾動(dòng)
2. 開(kāi)發(fā)者工具上正常書(shū)寫(xiě)，到真機(jī)的時(shí)候就寫(xiě)不上文字了，刪除掉原文章canvas標(biāo)簽上的type="3d"就可以了