需求

用户需在 APP 或 小程序 使用手写的方式签字或签名

效果图片 

实现方式

1. 封装成组件调用（推荐），如需了解使用可点击前往---【封装组件版】
2. 使用的页面内直接使用，目前的教程就是直接使用的，未封装成组件

使用

第一步：使用的页面，如 index.vue

<!-- canvas -->
<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>

<!-- 底部操作按钮 -->
<view class="footer">
        <view class="left" @click="finish">保存</view>
        <view class="right" @click="clear">清除</view>
        <view class="close" @click="close">关闭</view>
</view>


<view @click='createCanvas()'>点击触发写字板</view>

上面的canvas共绑定了3个方法

第二步：定义所需数据

export default {
	data() {
		return {
                    //绘图图像
                    ctx: '', 
                    //路径点集合
                    points: [], 
                    //签名图片
                    SignatureImg: ''
                }
              }
           }

第三步：绑定方法，书写逻辑

• createCanvas（）----  该方法主要是创建了画布
• touchstart（）----  触摸开始，获取到起点
• touchmove（）----  触摸移动，获取到路径点
• touchend（）----  触摸结束，将未绘制的点清空防止对后续路径产生干扰
• draw（）----  绘制笔迹
• clear（）----  清空画布
• finish（）----  完成绘画并保存到本地

methods: {
    createCanvas() {
        //创建绘图对象
        this.ctx = uni.createCanvasContext('mycanvas', this);
        //设置画笔样式
        this.ctx.lineWidth = 4;
        this.ctx.lineCap = 'round';
        this.ctx.lineJoin = 'round';
        },
    touchstart(e) {
        let startX = e.changedTouches[0].x;
        let startY = e.changedTouches[0].y;
        let startPoint = { X: startX, Y: startY };
        this.points.push(startPoint);
        //每次触摸开始，开启新的路径
        this.ctx.beginPath();
	},
   touchmove(e) {
        let moveX = e.changedTouches[0].x;
        let moveY = e.changedTouches[0].y;
        let movePoint = { X: moveX, Y: moveY };
        this.points.push(movePoint); //存点
        let len = this.points.length;
        if (len >= 2) {
                this.draw(); //绘制路径
        }
	},
   touchend() {
        this.points = [];
	},
   draw() {
        let point1 = this.points[0];
        let point2 = this.points[1];
        this.points.shift();
        this.ctx.moveTo(point1.X, point1.Y);
        this.ctx.lineTo(point2.X, point2.Y);
        this.ctx.stroke();
        this.ctx.draw(true);
        },
   clear() {
        let that = this;
        uni.getSystemInfo({
                success: function(res) {
                    let canvasw = res.windowWidth;
                    let canvash = res.windowHeight;
                    that.ctx.clearRect(0, 0, canvasw, canvash);
                    that.ctx.draw(true);
                }
        });
        },
   finish() {
        let that = this;
        uni.canvasToTempFilePath({
            canvasId: 'mycanvas',
            success: function(res) {
                     //这里的res.tempFilePath就是生成的签字图片
                    console.log(res.tempFilePath);
            }
        });
   }
}

上面 finish() 方法得到的 res.tempFilePath 就是生成出来的签名，可用于做余下的业务操作