本文例項為大家分享了微信小程式實現電子簽名的具體程式碼，供大家參考，具體內容如下

// XXXX.wxml
<view class="signName">
  <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart"
    bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd"
    binderror="canvasIdErrorCallback"></canvas>
 </view>
 <view class="CList flex">
  <view class="flex_item marginR20" >
    <view class="saveBtn" bindtap="uploadImg">上傳簽名</view>
  </view>
  <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;//畫布寬度
var canvash = 0;//畫布高度
Page({

  data: {
  },onLoad: function () {
   this.startCanvas();
  },/**
  * 以下 - 手寫簽名 / 上傳簽名
  */
 startCanvas: function () {//畫布初始化執行
  var that = this;
  //獲取系統資訊
  wx.getSystemInfo({
   success: function (res) {
    canvasw = res.windowWidth;
    canvash = res.windowHeight;
    that.setData({ canvasw: canvasw });
    that.setData({ canvash: canvash });
   }
  }); 
  this.initCanvas();
  this.cleardraw(); 
 },//初始化函式
 initCanvas: function () {
  context = wx.createCanvasContext('canvas');
  context.beginPath()
  context.fillStyle = 'rgba(255,255,0)';
  context.setStrokeStyle('#000000');
  context.setLineWidth(4);
  context.setLineCap('round');
  context.setLineJoin('round');
 },canvasStart: function (event) {
  isButtonDown = true;
  arrz.push(0);
  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++) {
   if (arrz[i] == 0) {
    context.moveTo(arrx[i],arry[i])
   } else {
    context.lineTo(arrx[i],arry[i])
   }
  }
  context.clearRect(0,canvasw,canvash);
  context.setStrokeStyle('#000000');
  context.setLineWidth(4);
  context.setLineCap('round');
  context.setLineJoin('round');
  context.stroke();
  context.draw(false);
 },canvasEnd: function (event) {
  isButtonDown = false;
 },//清除畫布
 cleardraw: function () {
  arrx = [];
  arry = [];
  arrz = [];
  context.clearRect(0,canvash);
  context.draw(true);
 },uploadImg(){
  var that = this
  //生成圖片
  wx.canvasToTempFilePath({
   canvasId: 'canvas',//設定輸出圖片的寬高
   // destWidth:150,// destHeight:150,// fileType:'jpg',quality:1.0,success: function (res) {
    console.log(res)
    // canvas圖片地址 res.tempFilePath
   },fail: function () {
    wx.showModal({
     title: '提示',content: 'canvas生成圖片失敗。微信當前版本不支援，請更新到最新版本！',showCancel: false
    });
   },complete: function () {}
  })
 },})

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。