微信小程序canvas用户手写签名板

走个效果图先：

WXML

清除保存图片

js:

// pages/sign/sign.js
var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;

//获取系统信息
wx.getSystemInfo({
  success: function (res) {
    canvasw = res.windowWidth;
    canvash = canvasw*9/16;
  },
}),

Page({
/**
* 页面的初始数据
*/
data: {
  signImage : '',
},
// 画布的触摸移动开始手势响应
start: function (event) {
  // console.log("触摸开始" + event.changedTouches[0].x)
  // console.log("触摸开始" + event.changedTouches[0].y)
  //获取触摸开始的 x,y
  let point = { x: event.changedTouches[0].x, y: event.changedTouches[0].y }
  touchs.push(point)
},

// 画布的触摸移动手势响应
move: function(e) {
  let point = {x: e.touches[0].x, y: e.touches[0].y}
  touchs.push(point)
  if(touchs.length >= 2) {
    this.draw(touchs)
  }
},

// 画布的触摸移动结束手势响应
end: function(e){
    console.log("触摸结束"+e)
    //清空轨迹数组
    for (let i = 0 ;i