微信小程序实现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: {