一杯茶的功夫，竟然实现了"电子签名"功能电子签名在现实生活中很常见，实现起来呢，其实也很简单，今天小编就来带各位拆解一下

hello大家好，今天依旧是canvas的入门级别案例 - 电子签名。这个功能在现实生活中很常见，实现起来呢，其实也很简单，今天小编就来带各位拆解一下这个功能。

还是老样子，先来看一段效果：

一、功能拆解

想要实现上面的效果，我们一定要仔细分析一下这个视频。

首先，想要在电脑上实现签名效果，至少你得是双指操作吧，就是一个手指处于按压状态，另一个手指用来签名。在这个过程中，如果有一个手指不处于按压状态，那么就立刻退出电子签名功能。因此你必不可少要在canvas画布上添加一些事件监听，比如：mousedown、mouseup、mousemove等。

其次，就是绘图功能。虽然canvas没有给你暴露现成的方法供你完成签名的功能，但签名本质上不就是点与点之间的连线吗。从点A绘制到点B，并且两点之间用线条连接，这个还是能做到的。

canvasContext.moveTo(x1, y1);
canvasContext.lineTo(x2, y2);
canvasContext.stroke();

看到这里大家可能会说，不对啊，你这么写那是2点之间，线段最短。而我们签名的时候，可是会出现弯弯绕的现象。

那这还不好解决吗，签名这个动作是连续的，我们只需要将上次绘制的点位记住就可以了，同时将上次的点位作为下次绘画的起点。

二、逐个击破

经过上面的拆解，相信大家已经摩拳擦掌了，那我们快点开始吧。

2.1、初始化canvas类

属性依旧是：element（指向画布标签）、canvasContext（canvas标签对应的渲染上下文）、width、height（定义画布的宽高）。

方法依旧是：setWidthAndHeight（设置canvas标签的宽和高）、addEventListener（给canvas标签添加事件监听）、setOrigin（记录绘制的起点）、draw（绘画功能）。

代码如下：

class Canvas {
    constructor(props) {
        this.element = props.element;
        this.canvasContext = this.element.getContext('2d');
        this.events = [];
        this.width = props.width;
        this.height = props.height;
        this.setWidthAndHeight(props.width, props.height);
    }
    
    setWidthAndHeight(width, height) {}
    
    addEventListener(eventName, eventCallback) {}
    
    setOrigin(x, y){}
    
    draw(x, y) {}
    
}

2.2、给canvas添加事件监听

添加事件监听之前，我们还需要增加一个全局变量isDown，它用来标识当前用户是否处于按压状态。false代表退出签名功能。

// 用于标识当前用户是否处于按压状态
let isDown = false;

// new 一个画布实例
let canvasInstance = new Canvas({
    element: document.querySelector('canvas'),
    width: 500,
    height: 500
});

// 给画布添加“鼠标按下”的监听函数
canvasInstance.addEventListener('mousedown', (target) => {
    if (!isDown){
        // 记录最开始的点位，即按下时的位置
        canvasInstance.setOrigin(target.offsetX, target.offsetY);
    }
    isDown = true;
});

// 给画布添加“鼠标松开”的监听函数
canvasInstance.addEventListener('mouseup', (target) => {
    isDown = false;
});

// 给画布添加“鼠标移动”的监听函数
canvasInstance.addEventListener('mousemove', (target) => {
    if (isDown){
        // 如果当前用户处于按压状态，说明此时用户在进行签名，那么就执行绘画操作
        canvasInstance.draw(target.offsetX, target.offsetY)
    }
});

2.3、记录绘画起点

class Canvas {
    setOrigin(x, y){
        this.x1 = x;
        this.y1 = y;
    }
}

这个没啥好说的，用户传进来啥，咱就记住啥。有一点需要注意，当用户处于按压操作时，需要执行一下这个函数，用于记录最开始绘画的起点。

2.4、绘画功能

这个就更简单，因为这个函数的触发是在mousemove事件里，在这里我们能拿到当前鼠标所处的位置（x，y）。因此我们直接绘画即可，每次绘画结束后，都要记住当前鼠标的点位，以此作为下次绘画的起点。

class Canvas {
    draw(x, y) {
        this.canvasContext.beginPath();
        this.canvasContext.moveTo(this.x1, this.y1);
        this.canvasContext.lineTo(x, y);
        this.canvasContext.stroke();
        this.setOrigin(x, y);
        this.canvasContext.closePath();
    }
}

至此，电子签名的功能就算完事了。

三、最后

好啦，本期内容到这里就结束啦，希望我的分享能够对你有帮助，那么，我们下期再见啦，拜拜～～。