支付宝小程序-canvas电子签名

// XXX.axml
<canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" onTouchStart="canvasStart" onTouchMove="canvasMove" onTouchEnd="canvasEnd" onTouchCancel="canvasEnd"></canvas>

 <view class="margin10  flex">
   <view class="flex_item marginR20">
     <view class="saveBtn" onTap="uploadImg">上传签名</view>
   </view>
   <view class="flex_item">
     <view class="clearBtn" onTap="cleardraw">清除签名</view>
   </view>
 </view>
 

 
var context = null;// 使用 my.createContext 获取绘图上下文 context
var isButtonDown = false;//是否在绘制中
var arrx = [];//动作横坐标
var arry = [];//动作纵坐标
var arrz = [];//总做状态，标识按下到抬起的一个组合
var canvasw = 0;//画布宽度
var canvash = 0;//画布高度
var isDraw = 0;

var app = getApp();

Page({

  /**
   * 页面的初始数据
   */
  data: {
  
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     this.startCanvas();
  },
  
  /**
   * 以下 - 手写签名 / 上传签名
   */
  startCanvas: function () {//画布初始化执行
    var that = this;
    //获取系统信息
    my.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 = my.createCanvasContext('canvas');
    context.beginPath();
    context.setFillStyle('rgba(255, 255, 255, 0)');
    context.setStrokeStyle('#000000');
    context.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
  },
  canvasStart: function (event) {
    isButtonDown = true;
    arrz = 0;
    arrx.push(event.changedTouches[0].x);
    arry.push(event.changedTouches[0].y);
  },
  canvasMove: function (event) {
    if (isButtonDown) {
      arrx.push(event.changedTouches[0].x);
      arry.push(event.changedTouches[0].y);
      if(!arrz){
        context.moveTo(arrx[0], arry[0]);
        arrz = 1;
      }
      context.lineTo(event.changedTouches[0].x, event.changedTouches[0].y)
    }
    context.stroke();
    context.draw(false);
  },
  canvasEnd: function (event) {
    isButtonDown = false;
    arrz = 0;
    arrx = [];
    arry = [];
  },
  //清除画布
  cleardraw: function () {
    this.initCanvas();
    arrx = [];
    arry = [];
    arrz = [];
    context.clearRect(0, 0, canvasw, canvash);
    context.draw(true);
  },
  uploadImg() {
    var that = this
    //生成图片
    my.canvasToTempFilePath({
      canvasId: 'canvas',
      //设置输出图片的宽高
      // destWidth:150, 
      // destHeight:150,
      // fileType:'jpg',
      quality: 1.0,
      success: function (res) {
        console.log(res)
        // canvas图片地址 res.tempFilePath

      },
      fail: function () {
        //console.log("canvas不可以生成图片")
        my.alert({
          title: '提示',
          content: '当前版本不支持，请更新到最新版本！',
          showCancel: false
        });
      },
      complete: function () { }
    })
  },
})