微信小程序手写签名，使用canvas 2d 丝滑连笔，不卡顿

最近产品让我写个手写签名，上网百度了一下，基本上快速连笔都很卡，于是自己参考资料重写了一下，体验效果拉满，话不多说上代码。

WXML代码

<canvas type="2d" id="canvas" disable-scroll="true"  bindtouchmove="handleMove" bindtouchstart="handleStart"  binderror="handleError" style="width:{{width}}px;height:{{height}}px;"></canvas>
<view class="btn">
  <button bindtap="clearClick">重签</button>
  <button bindtap="saveClick">确认</button>
</view>

WXSS

page {
  background-color: #e7e7e7;
}
.btn {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  position: fixed;
  bottom: 0px;
}
.btn button {
  color: #006ec7;
}
button {
  width: 200rpx;
  border-radius: 5rpx;
  box-shadow: 0px 0px 1px 1px #c5c5c5;
}
canvas {
  background-color: white;
}

 JS代码

Page({
  data: {
    canvas: '',
    ctx: '',
    pr: 0,
    width: 0,
    height: 0,
    preX: 0,
    preY: 0
  },
  handleStart(e) {
    this.data.ctx.beginPath()
    this.data.preX = e.changedTouches[0].x
    this.data.preY =  e.changedTouches[0].y
  },
  handleMove(e) {
    this.data.ctx.moveTo(this.data.preX, this.data.preY)
    this.data.ctx.lineTo(e.changedTouches[0].x, e.changedTouches[0].y) 
    this.data.ctx.stroke()
    this.data.preX = e.changedTouches[0].x
    this.data.preY = e.changedTouches[0].y
  },
  handleError(e) {
    console.log("画布触摸错误" + e);
  },

  /**
   * 初始化
   */
  createCanvas() {
    const pr = this.data.pr; // 像素比
    const query = wx.createSelectorQuery();
    query.select('#canvas').fields({
      node: true,
      size: true
    }).exec((res) => {
      console.log(this.data.height);
      const canvas = res[0].node;
      const ctx = canvas.getContext('2d');
      canvas.width = this.data.width * pr; // 画布宽度
      canvas.height = this.data.height * pr; // 画布高度
      ctx.scale(pr, pr)
      ctx.lineGap = 'round';
      ctx.lineJoin = 'round';
      ctx.lineWidth = 4; // 字体粗细
      ctx.font = '40px Arial'; // 字体大小，
      ctx.fillStyle = '#ecf0ef'; // 填充颜色
      this.setData({
        ctx,
        canvas
      })
    })
  },
  // 获取系统信息
  getSystemInfo() {
    let that = this;
    wx.getSystemInfo({
      success(res) {
        console.log(res,'sysinfo');
        that.setData({
          pr: res.pixelRatio,
          width: res.windowWidth,
          height: res.windowHeight - 60,
        })
      }
    })
  },
  clearClick: function () {
    //清除画布
    this.data.ctx.clearRect(0, 0, this.data.width, this.data.height);
  },
  //保存图片
  saveClick: function () {
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: this.data.width,
      height: this.data.height,
      destWidth:this.data.width*this.data.pr,
      destHeight: this.data.height*this.data.pr,
      canvasId: 'canvas',
      canvas: this.data.canvas,
      fileType: 'png',
      success(res) {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(res) {
            wx.showToast({
              title: '保存成功',
              icon: 'success'
            })
          }
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    this.getSystemInfo()
    this.createCanvas()
    
  },
  onShow() {
    let that = this;
    wx.onWindowResize(function (res) {
      that.setData({
        width: res.size.windowWidth,
        height: res.size.windowHeight - 60,
      })
      that.createCanvas()
    })
  }
})

运行效果