微信小程序用 canvas 实现手写签名弹框（全网最最最详细！！）

一、签字面板效果图

二、WXML文件

🌸点击弹出手写签名面板事件

<van-button type="default" bindtap="handWrittenSign">点击弹出手写签名弹框</van-button>

🌸手写签名面板 Popup 弹出层（vant）

<van-popup show="{{ showWritten }}" position="bottom" custom-class="writtenArea" bind:close="writtenSignClose">
    <view class="agree-area">
        <text>请签字以确认同意用户服务协议</text>
    </view>
    <canvas type="3d" canvas-id="myCanvas" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd" class="canvas-area"></canvas>
    <view class="written-btn-area">
        <van-button type="default" custom-class="write" bindtap="resetWrite" size="small">重置</van-button>
        <van-button plain type="info" custom-class="write" bindtap="cancelWrite" size="small">取消</van-button>
        <van-button type="info" custom-class="write" bindtap="confirmWrite" size="small">确认</van-button>
    </view>
</van-popup>

三、JS文件

Page({
	/**
     * 页面的初始数据
     */
    data: {
        showWritten: false,  //展示手写签名弹框
        startX: undefined, // 线条的坐标点
        startY: undefined,
        userSignatureId: undefined, // 签名图片id
        screenWidth: undefined, // 屏幕宽
        screenHeight: undefined, // 屏幕高
    },
	
	/**
     * 事件
     */
	
	// 点击弹出手写签名弹框
	handWrittenSign() {
        this.setData({ showWritten: true });
        this.initCanvas();
    },
	
	// 点击蒙层关闭弹框
	writtenSignClose() {
        this.setData({ showWritten: false });
        this.resetWrite();
    },

	// 初始化画布
	initCanvas() {
        const context = wx.createCanvasContext('myCanvas', this);
        context.setStrokeStyle('#000'); // 设置线条样式
        context.setLineWidth(3); // 线条粗细
        context.setLineCap('round'); // 设置线条端点样式
        context.setLineJoin('round'); // 设置线条交点样式（拐角）
        context.beginPath(); // 开始新的绘制路径
        context.clearRect(0, 0, this.data.startX, this.data.startY); // 清除画布上的内容
        context.draw(); // 绘制到canvas上
    },

	// 手指触摸动作开始
	onTouchStart(e) {
        const context = wx.createCanvasContext('myCanvas', this);

        context.setStrokeStyle('#000000');
        context.setLineWidth(3);

        this.setData({
            'startX': e.touches[0].x,
            'startY': e.touches[0].y,
        })
    },

	// 手指触摸后移动
	onTouchMove(e) {
        const context = wx.createCanvasContext('myCanvas', this);
        
        context.moveTo(this.data.startX, this.data.startY);
        context.lineTo(e.touches[0].x, e.touches[0].y);
        context.stroke();
        context.draw(true);
        
        this.setData({
            'startX': e.touches[0].x,
            'startY': e.touches[0].y,
        })
    },

	// 手指触摸动作结束
	onTouchEnd() {
        const context = wx.createCanvasContext('myCanvas', this);
        context.closePath();
        context.draw(true);
    },

	// 重置签名
    resetWrite() {
        const context = wx.createCanvasContext('myCanvas', this);
        let { screenWidth, screenHeight } = this.data;
        // 清空画布
        context.clearRect(0, 0, screenWidth, screenHeight);
        context.beginPath();
        // 绘制白色背景
        context.setFillStyle('#ffffff'); // 填充色 白色
        context.fillRect(0, 0, screenWidth, screenHeight); // 绘制一个矩形清除画布内容
        context.setLineWidth(3);  // 线条粗细
        // 绘制提示文字（根据需求可要可不要）
        context.setFontSize(14);
        context.setFillStyle('#999999');
        context.setTextAlign('center');
        context.fillText('请在此区域签名', this.data.startX / 2, this.data.startY / 2);
        // 绘制到canvas上
        context.draw();
    },

	// 取消签名
    cancelWrite() {
		this.setData({ 
            showWritten: false
        })
        const context = wx.createCanvasContext('myCanvas', this);
        let { screenWidth, screenHeight } = this.data;
         // 清空画布
        context.clearRect(0, 0, screenWidth, screenHeight);
        context.beginPath();
        context.setFillStyle('#ffffff');
        context.fillRect(0, 0, screenWidth, screenHeight);
        context.setLineWidth(3);
        // 绘制到canvas上
        context.draw();
    },
  
  	// 确认提交
    confirmWrite() {
		this.setData({showWritten: false});  // 关闭手写面板
        wx.canvasToTempFilePath({
            canvasId: 'myCanvas',
            success: function(res) {
              const tempFilePath = res.tempFilePath; // 取图片文件路径
              // 将 tempFilePath 传递给后端接口
    		  uploadFile({fileType: 'image', tempFilePath: tempFilePath})
                .then(file => {
                // 由于签名面板在表单中，提交表单需要传签名文件id，在这里赋值
                    that.setData({ userSignatureId: file.id })
                })
                .catch(err => {
                    console.error(err)
                })
            }
        });
    },  
	
	/**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        // 获取屏幕的宽高 可结合画布在父元素的百分比获取实际宽高度；若画布为固定值，以上所用宽高度可不用在此获取，直接写死即可。
        const systemInfo = wx.getSystemInfoSync();
        this.setData({
            screenWidth: systemInfo.screenWidth,
            screenHeight: systemInfo.screenHeight
        })
    },
})

🌸最后可以使用 canvas 组件的 toTempFilePath 方法将 canvas 画布内容保存为临时文件路径，然后将该路径传递给后端即可。

四、WXSS文件

.writtenArea {
    height: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.canvas-area {
    width: 90%;
    flex: 1;
    border: 1px solid #ccc;
}

.write {
    width: 180rpx;
}

.written-btn-area {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 40rpx;
    margin-top: 20rpx;
}

.agree-area {
    width: 90%;
    margin: 20rpx 0;
    text-align: left;
    font-size: 36rpx;
    font-weight: 700;
}

五、小Tips ~

💡 文中触摸板的方法中多次获取canvas的上下文，即const context = wx.createCanvasContext('myCanvas', this);，我这里是直接在函数内部定义方法，内部使用。也可全局定义，使用wx.createCanvasContext 获取绘图上下文 context全局使用，如下：

Page({
  data: {
    canvasContext: null // canvas上下文对象
  },
  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.data.canvasContext = wx.createCanvasContext('myCanvas', this);
  },
  // ...
})

六、IOS会遇到的问题及如何解决

🌸微信小程序给出的解决方案：