微信小程序 手写签名_微信小程序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