引言，這個(gè)功能是我看到CSDN里面一個(gè)老哥寫(xiě)的，感覺(jué)挺不錯(cuò)的，就拿出來(lái)借鑒一下并優(yōu)化了一些功能，比如頁(yè)面樣式和保存之后的黑色底色這些，原鏈接如下：https://blog.csdn.net/weixin_42460570/article/details/83025660

先上一波效果吧

小程序電子簽名.gif

下面是代碼部分了

html

<view class='container'>
  <!-- 簽名畫(huà)布 -->
  <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback">
 
  </canvas>
 
  <view class='buttonBox'>
    <button  class='delbutton' style="color:#e64340;border-right: 1px solid #eeeeee;" bindtap="cleardraw">清除</button>
    <button bindtap='clickMe'  style="color:#09bb07" class='addbutton' open-type="getuserinfo">完成</button>
 
  </view>
</view>

css

.canvas {
  width: 100%;
  height: calc(100% - 3.5rem);
  /* border-bottom: 1rpx solid #e2e2e2e2;   */
  position: fixed;
  box-sizing: border-box;
  background: #fff;

} 
 
.imageCanvas{
  width: 100%;
  height: 300rpx;
}
.buttonBox{
  width: 100%;
  justify-content: center;
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 3.5rem;
align-items: center;
background: #fff;
border-top: 1px solid #eeeeee;

}
.buttonBox button{
  flex: 1;
  height: 100%;
  line-height:3.5rem;
  padding: 0;
}

js

// canvas 全局配置
var context = null;
var isButtonDown = false;
var arrx = [];
var arry = [];
var arrz = [];
var canvasw = 0;
var canvash = 0;
//注冊(cè)頁(yè)面
Page({
  canvasIdErrorCallback: function (e) {
    console.error(e.detail.errMsg)
  },
  //開(kāi)始
  canvasStart: function (event) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
 
  },
  data: {
    src: "",
    img: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=578899140,1412678472&fm=27&gp=0.jpg",
    rpx: ''
  },
 
  onLoad: function (options) {
    wx.showModal({
      title:'提示',
      content:'請(qǐng)橫屏填寫(xiě)',
      showCancel:false,
      confirmText:'我已知曉',
      confirmColor:'#09bb07'
    })
    var that = this
    // 使用 wx.createContext 獲取繪圖上下文 context
    context = wx.createCanvasContext('canvas');
    context.beginPath()
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    
    context.setFillStyle('#ffffff') 
    context.fillRect(0, 0, 500, 750)
    // context.drawImage('../../images/img111.png', 0, 0, canvasw, 500);
    context.draw();
  },
 
  //過(guò)程
  canvasMove: function (event) {
    var that = this
    if (isButtonDown) {
      arrz.push(1);
      console.log(event)
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
    };
 
    for (var i = 0; i < arrx.length; i++) {
      if (arrz[i] == 0) {
        context.moveTo(arrx[i], arry[i])
      } else {
        context.lineTo(arrx[i], arry[i])
      };
 
    };
    context.setFillStyle('#ffffff') 
    context.fillRect(0, 0, 500, 750)
    context.clearRect(0, 0, canvasw, canvash);
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
    context.stroke();
 
    context.draw(false);
  },
  // 點(diǎn)擊保存圖片
  clickMe: function () {
    wx.showLoading({
      title: '正在保存中...',
    })
    wx.canvasToTempFilePath({
      canvasId: 'canvas',
      fileType: 'png',
      success: function (res) {
        console.log(res)
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            console.log(res)
            wx.hideLoading();
            wx.showToast({
              title: '保存成功',
            });
            // //存入服務(wù)器
            // wx.uploadFile({
            //   url: 'a.php', //接口地址
            //   filePath: res.tempFilePath,
            //   name: 'file',
            //   formData: {                                 //HTTP 請(qǐng)求中其他額外的 form data 
            //     'user': 'test'
            //   },
            //   success: function (res) {
            //     console.log(res);
 
            //   },
            //   fail: function (res) {
            //     console.log(res);
            //   },
            //   complete: function (res) {
            //   }
            // });
          },
          fail() {
            wx.hideLoading()
          }
        })
      }
    })
  },
  canvasEnd: function (event) {
    isButtonDown = false;
  },
  cleardraw: function () {
    //清除畫(huà)布
    arrx = [];
    arry = [];
    arrz = [];
    context.draw(false);
  },
 
})