微信小程序实现电子签名功能

微信小程序实现电子签名功能微信小程序实现电子签名功能

主要为大家详细介绍了微信小程序实现电子签名功能，文中示例代码介绍的非常详细，具有一定的参考价值，

感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现电子签名的具体代码，供大家参考，具体内容如下

// XXXX.wxml

<view class="signName">

<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart"

bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd"

<view class="flex_item">

<view class="clearBtn" bindtap="cleardraw">清除签名</view>

</view>

js:

var context = null;// 使用 wx.createContext 获取绘图上下文 context

var isButtonDown = false;//是否在绘制中

var arrx = [];//动作横坐标

var arry = [];//动作纵坐标

var arrz = [];//总做状态，标识按下到抬起的一个组合

var canvasw = 0;//画布宽度

this.startCanvas();

},

/**

* 以下 - 手写签名 / 上传签名

*/

startCanvas: function () {//画布初始化执行

var that = this;

//获取系统信息

wx.getSystemInfo({

success: function (res) {

this.initCanvas();

this.cleardraw();

},

//初始化函数

initCanvas: function () {

context = wx.createCanvasContext('canvas');

context.beginPath()

context.fillStyle = 'rgba(255, 255, 255, 0)';

context.setStrokeStyle('#000000');

context.setLineWidth(4);

arrx.push(event.changedTouches[0].x);

arry.push(event.changedTouches[0].y);

},

canvasMove: function (event) {

if (isButtonDown) {

arrz.push(1);

arrx.push(event.changedTouches[0].x);

arry.push(event.changedTouches[0].y);

}

for (var i = 0; i < arrx.length; i++) {