2022-前端实现电子签名（web、移动端）通用组件

最新推荐文章于 2024-12-24 10:09:05 发布

原创

最新推荐文章于 2024-12-24 10:09:05 发布 · 1.3k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

本文介绍如何利用HTML5的canvas标签实现电子签名功能，包括在web和移动端上的兼容性处理、取消与保存签名的操作。

前端实现电子签名（web、移动端）通用组件

前言

在现在的时代发展中，从以前的手写签名，逐渐衍生出了电子签名。电子签名和纸质手写签名一样具有法律效应。电子签名目前主要还是在需要个人确认的产品环节和司法类相关的产品上较多。

举个常用的例子，大家都用过钉钉，钉钉上面就有电子签名，相信大家这肯定是知道的。

那作为前端的我们如何实现电子签名呢？其实在html5中已经出现了一个重要级别的辅助标签，是啥呢？那就是canvas[2]。

什么是`canvas`

Canvas（画布）[3]是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）。Canvas 对象表示一个 HTML 画布元素 -。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图操作。

大白话就是canvas是一个可以在上面通过javaScript画图的标签，通过其提供的context(上下文)及Api进行绘制，在这个过程中canvas充当画布的角色。

<canvas></canvas>

如何使用

canvas给我们提供了很多的Api，供我们使用，我们只需要在body标签中创建一个canvas标签，在script标签中拿到canvas这个标签的节点，并创建context(上下文)就可以使用了。

<body>
    <canvas></canvas>
</body>
<script>
    // 获取canvas 实例
    const canvas = document.querySelector('canvas')
    canvas.getContext('2d')
</script>

步入正题。

实现电子签名

知道几何的朋友都很清楚，线有点绘成，面由线绘成。

多点成线，多线成面。

所以我们实际只需要拿到当前触摸的坐标点，进行成线处理就可以了。

在`body`中添加`canvas`标签

在这里我们不仅需要在在body中添加canvas标签，我们还需要添加两个按钮，分别是取消和保存（后面我们会用到）。

<body>
    <canvas></canvas>
    <div>
        <button>取消</button>
        <button>保存</button>
    </div>
</body>
复制代码

添加文件

我这里全程使用js进行样式设置及添加。

// 配置内容
    const config = {
   
   
        width: 400, // 宽度
        height: 200, // 高度
        lineWidth: 5, // 线宽
        strokeStyle: 'red', // 线条颜色
        lineCap: 'round', // 设置线条两端圆角
        lineJoin: 'round', // 线条交汇处圆角
    }

获取`canvas`实例

这里我们使用querySelector获取canvas的dom实例，并设置样式和创建上下文。

    // 获取canvas 实例
    const canvas = document.querySelector('canvas')
    // 设置宽高
    canvas.width = config.width
    canvas.height = config.height
    // 设置一个边框，方便我们查看及使用
    canvas.style.border = '1px solid #000'
    // 创建上下文
    const ctx = canvas.getContext('2d')

基础设置

我们将canvas的填充色为透明，并绘制填充一个矩形，作为我们的画布，如果不设置这个填充背景色，在我们初识渲染的时候是一个黑色背景，这也是它的一个默认色。

    // 设置填充背景色
    ctx.fillStyle = 'transparent'
    // 绘制填充矩形
    ctx.fillRect(
        0, // x 轴起始绘制位置
        0, // y 轴起始绘制位置
        config.width, // 宽度
        config.height // 高度
    );

上次绘制路径保存

这里我们需要声明一个对象，用来记录我们上一次绘制的路径结束坐标点及偏移量。

保存上次坐标点这个我不用说大家都懂；
为啥需要保存偏移量呢，因为鼠标和画布上的距离是存在一定的偏移距离，在我们绘制的过程中需要减去这个偏移量，才是我们实际的绘制坐标。
但我发现chrome中不需要减去这个偏移量，拿到的就是实际的坐标，之前在微信小程序中使用就需要减去偏移量，需要在小程序中使用的朋友需要注意这一点哦。

    // 保存上次绘制的 坐标及偏移量
    const client = {
   
   
        offsetX: 0, // 偏移量
        offsetY

最低0.47元/天解锁文章