小程序实现canvas签名

示例代码（旧的接口）

index.wxml

<view class="container">
  <view class="operating">
    <text bindtap="ceshi">确定</text>
    <text bindtap="clearSignature">清空</text>
  </view>
  <canvas canvas-id="firstCanvas"  style=" width:{{canvasWidth+'px'}};height:{{canvasHeight+'px'}}" disable-scroll="true" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove"
    bindtouchend="uploadScaleEnd" bindtap="mouseDown">
  </canvas>
</view>

index.wxss

canvas {
  box-sizing: border-box;
  border: 1px dashed black;
}
.operating{
  width: 60px;
  display: flex;
  flex-direction: column;
  height: 100%;

}
.operating>text{
  transform:rotate(90deg);
  margin-top: 25px;
}

index.js

//index.js
//获取应用实例
const app = getApp()
let content = null;
var touchs = [];
Page({
  data: {
    canvasWidth: 0,
    canvasHeight: 0
  },
  onLoad: function () {
    this.setData({
      canvasWidth: wx.getSystemInfoSync().windowWidth - 80,
      canvasHeight: wx.getSystemInfoSync().windowHeight - 100
    })
  },
  ceshi() {
    wx.navigateTo({
      url: '../logs/logs',
    })
  },
  onShow: function () {
    content = wx.createCanvasContext('firstCanvas')
    //设置线的颜色
    content.setStrokeStyle("#00ff00")
    //设置线的宽度
    content.setLineWidth(5)
    //设置线两端端点样式更加圆润
    content.setLineCap('round')
    //设置两条线连接处更加圆润
    content.setLineJoin('round')
  },
  draw(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)
  },
  uploadScaleStart: function (event) {
    let point = {
      x: event.changedTouches[0].x,
      y: event.changedTouches[0].y
    }
    touchs.push(point)
  },
  uploadScaleMove: function (e) {
    let point = {
      x: e.touches[0].x,
      y: e.touches[0].y
    }
    touchs.push(point)
    if (touchs.length >= 2) {
      this.draw(touchs)
    }
  },
  uploadScaleEnd: function (e) {
    for (let i = 0; i < touchs.length; i++) {
      touchs.pop()
    }
  },
  clearSignature() {
    console.log(233)
    //清除画布
    content.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight)
    content.draw(true)
  },
  saveClick() {
    var that = this
    wx.canvasToTempFilePath({
      canvasId: 'firstCanvas',
      success: function (res) {
        //打印图片路径
        console.log(res.tempFilePath)
        //设置保存的图片
        that.setData({
          signImage: res.tempFilePath
        })
      }
    })
  }
})

示例代码二（使用2d）

index.wxml

<!--index.wxml-->
<view class="container">
  <view class="operating">
    <text bindtap="ceshi">确定</text>
    <text bindtap="clearSignature">清空</text>
    <text bindtap="saveClick">生成图片</text>
  </view>
  <canvas type="2d" id="firstCanvas"  style=" width:{{canvasWidth+'px'}};height:{{canvasHeight+'px'}}" disable-scroll="true" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove"
    bindtouchend="uploadScaleEnd" bindtap="mouseDown">
  </canvas>
</view>

index.wxss

canvas {
  box-sizing: border-box;
  border: 1px dashed black;
}
.operating{
  width: 60px;
  display: flex;
  flex-direction: column;
  height: 100%;

}
.operating>text{
  transform:rotate(90deg);
  margin-top: 25px;
}

index.js

//index.js
//获取应用实例
const app = getApp()
let content = null;
let canvas = null
var touchs = [];
Page({
  data: {
    canvasWidth: 0,
    canvasHeight: 0
  },
  onLoad: function () {
    this.setData({
      canvasWidth: wx.getSystemInfoSync().windowWidth - 80,
      canvasHeight: wx.getSystemInfoSync().windowHeight - 100
    })
  },
  ceshi() {
    wx.navigateTo({
      url: '../logs/logs',
    })
  },
  onShow: function () {
    // 初始化画布
    const query = wx.createSelectorQuery()
    query.select('#firstCanvas')
      .fields({
        node: true,
        size: true
      })
      .exec((res) => {
        console.log(res)
        canvas = res[0].node
        content = canvas.getContext('2d')
        content.fillStyle = "#00ff00"
        //设置线的宽度
        content.lineWidth = 3
        //设置线两端端点样式更加圆润
        content.lineCap  = 'round'
        //设置两条线连接处更加圆润
        content.lineJoin = 'round'
        // 利用阴影，消除锯齿
        content.shadowBlur = 1;
        content.shadowColor = '#000';
        const dpr = wx.getSystemInfoSync().pixelRatio
        // 宽高必须设置，不然会变形
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        content.scale(dpr, dpr)
      })
  },
  draw(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()
  },
  uploadScaleStart: function (event) {
    let point = {
      x: event.changedTouches[0].x,
      y: event.changedTouches[0].y
    }
    touchs.push(point)
    content.beginPath();
  },
  uploadScaleMove: function (e) {
    let point = {
      x: e.touches[0].x,
      y: e.touches[0].y
    }
    touchs.push(point)
    if (touchs.length >= 2) {
      this.draw(touchs)
    }
  },
  uploadScaleEnd: function (e) {
    for (let i = 0; i < touchs.length; i++) {
      touchs.pop()
    }
    content.closePath();
  },
  clearSignature() {
    console.log(233)
    //清除画布
    content.clearRect(0, 0, this.data.canvasWidth, this.data.canvasHeight)
    content.draw(true)
  },
  saveClick() {
    var imgBase64 = canvas.toDataURL();
    console.log(imgBase64);
  }
})