微信小程序：手写板功能实现（canvas）

在微信小程序中，同样支持canvas的使用。

1.首先在 wxml 页面中添加<canvas></canvas>组件：

<canvas class="sign" canvas-id="sign" bindtouchmove="move" bindtouchstart="start" bindtouchend="end" bindtouchcancel="cancel" bindlongtap="tap" disable-scroll="true" binderror="error">
</canvas>

2.在小程序的 js 中初始化所需的变量如下：

// 初始化签名变量，放在 Page 前
var content = null;
var touchs = [];

//页面的data数据，在 Page 中
data: {
    imgList:[],
    signImage: ''
  }

3.在小程序的 js 中 Page 内写入如下函数：

  // 画布的触摸移动开始手势响应
  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 < touchs.length; i++) {
      touchs.pop();
    }
  },
  // 画布的触摸取消响应
  cancel: function (e) {
    console.log("触摸取消" + e);
  },
  // 画布的长按手势响应
  tap: function (e) {
    console.log("长按手势" + e);
  },
  error: function (e) {
    console.log("画布触摸错误" + e);
  },
  /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function (options) {
    //获得Canvas的上下文
    content = wx.createCanvasContext('sign');
    //设置线的颜色
    content.setStrokeStyle("#000");
    //设置线的宽度
    content.setLineWidth(3);
    //设置线两端端点样式更加圆润
    content.setLineCap('round');
    //设置两条线连接处更加圆润
    content.setLineJoin('round');
  },
  //绘制
  draw: function (touchs) {
    let point1 = touchs[0];
    let point2 = touchs[1];
    touchs.shift();
    content.moveTo(point1.x, point1.y);
    content.lineTo(point2.x, point2.y);
    content.stroke();
    content.draw(true);
  },
  //清除操作
  clearClick: function () {
    //清除画布
    content.clearRect(0, 0,750, 700);
    content.draw(true);
  },
  //保存图片
  saveClick: function () {
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'firstCanvas',
      success: function (res) {
        //打印图片路径
        console.log(res.tempFilePath);
        //设置保存的图片
        that.setData({
          signImage: res.tempFilePath
        })
      }
    })
  }