微信小程序用新版canvas做手写签名

可以使用新版的canvas来实现手写签名功能。下面是一个简单的示例代码：

1. 在wxml文件中添加canvas标签：

<canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas>

2. 在js文件中获取canvas对象并绑定事件：

const ctx = wx.createCanvasContext('myCanvas');

// 定义画笔的颜色、粗细等属性
ctx.setStrokeStyle('black')
ctx.setLineWidth(3)
ctx.setLineCap('round')
ctx.setLineJoin('round')

let isDrawing = false;
let lastX = 0;
let lastY = 0;

// 触摸事件
wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
  const canvas = res[0].node;
  const dpr = wx.getSystemInfoSync().pixelRatio;
  canvas.width = res[0].width * dpr;
  canvas.height = res[0].height * dpr;
  ctx.scale(dpr, dpr);

  canvas.addEventListener('touchstart', (e) => {
    isDrawing = true;
    lastX = e.touches[0].x;
    lastY = e.touches[0].y;
  });

  canvas.addEventListener('touchmove', (e) => {
    if (!isDrawing) return;
    ctx.beginPath();
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(e.touches[0].x, e.touches[0].y);
    ctx.stroke();
    lastX = e.touches[0].x;
    lastY = e.touches[0].y;
  });

  canvas.addEventListener('touchend', (e) => {
    isDrawing = false;
  });
});

3. 在提交时获取canvas数据：

wx.canvasToTempFilePath({
  canvasId: 'myCanvas',
  success: (res) => {
    // res.tempFilePath 是生成的图片路径
  }
});

这样就可以实现一个简单的手写签名功能了。当然，还可以根据需要进行更加复杂的实现。