微信小程序实现canvas电子签名（canvas2D）

解决了无法清空画布以及手写位置偏移的问题

wxml

<view class="sign-contain">

      <view class="signName">

       <canvas id="canvas" type="2d" class="{{ sysType === 'iOS' ? 'canvas' : 'canvas bg000'}}" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback" style="width: {{canvasw}}px;"></canvas>

      </view>

    

    <view style="padding: 10px;">

      <view style="height: 25px;"></view>

      <view style="display: flex;justify-content: center;align-items: center;">

        <van-button plain type="primary" bind:click="uploadImg">确认签名</van-button>

        <view style="width: 10px;"></view>

        <van-button plain type="warning" bind:click="cleardraw">清除签名</van-button>

      </view>

    </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: {

    canvasw: '',

    canvash: '',

    imgUrl: '',

    info: {},

    signBase64: '',

    sysType: '', // 判断机型

     canvas: {}

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad(options) {

//判断画布上是否已签名

    wx.setStorageSync('draw', false)

    let that = this

    let res = wx.getSystemInfoSync()

    const system = res.system.split(' ')

    that.setData({

      sysType: system[0],

    })

   

    that.startCanvas();

    that.initCanvas()

  },

  /**

 * 以下 - 手写签名 

 */

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

    var that = this;

    //获取系统信息

    wx.getSystemInfo({

      success: function (res) {

//根据需求调整

        canvasw = res.windowWidth -20;

        canvash = res.windowHeight;

        that.setData({ canvasw: canvasw ，canvash: canvash})

      }

    });

    this.initCanvas();

  },

  //初始化函数

  initCanvas() {

    const query = wx.createSelectorQuery()

    query.select('#canvas')

      .fields({ node: true, size: true })

      .exec((res) => {

        const canvas = res[0].node

         this.setData({

               canvas

        })

        context = canvas.getContext('2d')

        if (this.data.sysType == 'iOS') {

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

          context.strokeStyle='#444';

        } else {

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

          context.strokeStyle='#aaa';

        }

        context.lineWidth=4;

        context.lineCap='round';

        context.lineJoin='round';

//设置width和height手写位置才不会发生偏移

       canvas.width = res[0].width

        canvas.height = res[0].height

      })

  },

  canvasStart(event) {

//要添加 context.beginPath()后面才能清空画布

    context.beginPath()

    isButtonDown = true;

    arrz.push(0);

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

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

//画布上有东西了

   wx.setStorageSync('draw', true)

  },

  canvasMove(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, 0, context.width, context.height);

    if (this.data.sysType === 'iOS') {

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

      context.strokeStyle='#444';

    } else {

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

      context.strokeStyle='#aaa';

    }

    context.lineWidth=3;

    context.lineCap='round';

    context.lineJoin='round';

    context.stroke();

    // canvas2D不需要context.draw(false);

  },

  canvasEnd(event) {

    isButtonDown = false;

  },

   //清除画布

   cleardraw() {

   arrx = [];

    arry = [];

    arrz = [];

    context.clearRect(0, 0, canvasw, canvash);

    if(this.data.sysType === 'iOS') {

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

      context.strokeStyle='#444';

    } else {

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

      context.strokeStyle='#aaa';

    }

        wx.setStorageSync('draw', false)

        this.setData({

              imgUrl: '',

              signBase64: ''

    })

  },

//生成图片路径

 uploadImg() {

    var that = this

    var draw = wx.getStorageSync('draw')

    if (!draw) {

      Toast('请完成签名!')

      return

    }

    wx.canvasToTempFilePath({

      x: 100,

      y: 200,

      width: 50,

      height: 50,

      destWidth: 100,

      destHeight: 100,

      canvas: this.data.canvas,//画布标识，传入 canvas 组件实例 （canvas type="2d" 时使用该属性）。

      success(res) {

        // console.log(res.tempFilePath)

        let imgBase64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64')

        that.setData({

          imgUrl: res.tempFilePath,

          signBase64: imgBase64

        })

        Toast.success('上传成功！')

      },

      fail(err) {

        console.log(err)

        wx.showModal({

          title: '提示',

          content: '生成签名失败。微信当前版本不支持，请更新到最新版本！',

          showCancel: false

        });

      }

    })

  },

})

wxss

.sign-contain {

  display: flex;

  flex-direction:column;

  width: 100%;

  height: 100%;

  align-items: center;

}

 .signName {

  flex: 1;

}

.bg000{

  background-color: #000;

}

.btn-wrap{

  display: block;

  width:100%;

  height: 100rpx;

  margin: 20rpx 0;

  position: relative;

}

.btn-wrap button{

  width: 43%;

} 

参考了https://www.jb51.net/article/215000.htm

如果侵权请联系删除