【微信小程序canvas】实现小程序手写板用户签名(附代码)

【微信小程序canvas】实现小程序手写板用户签名(附代码)

工作中公司业务需要的微信小程序用户签字功能

先看效果图：

wxml

<view class="wrapper">
  <view class="handBtn">
    <button catchtap="retDraw" class="delBtn">重写</button>
    <button catchtap="subCanvas" class="subBtn">完成</button> 
  </view>
  <view class="handCenter">
    <canvas class="handWriting" disable-scroll="true" bindtouchstart="uploadScaleStart" bindtouchmove="uploadScaleMove"
      bindtouchend="uploadScaleEnd" bindtap="mouseDown" canvas-id="handWriting">
    </canvas>
  </view>
  <view class="handRight">
    <view class="handTitle">手写板</view>
  </view>
</view>

js

data

page({
   
	data: {
   
		canvasName: 'handWriting',
	    ctx: '',
	    canvasWidth: 0,
	    canvasHeight: 0,
	    transparent: 1, // 透明度
	    selectColor: 'black',
	    lineColor: '#1A1A1A', // 颜色
	    lineSize: 1.5,  // 笔记倍数
	    lineMin: 0.5,   // 最小笔画半径
	    lineMax: 4,     // 最大笔画半径
	    pressure: 1,     // 默认压力
	    smoothness: 60,  //顺滑度，用60的距离来计算速度
	    currentPoint: {
   },
	    currentLine: [],  // 当前线条
	    firstTouch: true, // 第一次触发
	    radius: 1, //画圆的半径
	    cutArea: {
    top: 0