想要实现一个电子签名，可以支持鼠标签名，还能类似书法效果线条有粗有细，同时可以导出成图片.

一、实现连贯的划线

　　1）首先需要注册鼠标下压、鼠标放开、鼠标移出和鼠标移动事件，通过鼠标下压赋值downFlag标记开始绘制

　　2)  鼠标移动时，将当前坐标位置传入绘制方法，通过lineTo方法实现绘制

/**

     * 按下鼠标启动绘制标记

     **/

    canvas.addEventListener('mousedown', e => {

      preCoord = [e.offsetX, e.offsetY, new Date().getTime()];

      downFlag = true;

    })

    /**

     * 鼠标松开结束绘制

     **/

    canvas.addEventListener('mouseup', e => {

      downFlag = false;

    })

    canvas.addEventListener('mouseout', () => {

      downFlag = false;

    })

    /**

     * 鼠标移动时绘制文字

     **/

    canvas.addEventListener('mousemove', e => {

      if (downFlag) {

        const coord = [e.offsetX, e.offsetY];

        drawSign(coord);

        preCoord = [...coord, new Date().getTime()];

      }

    })

　　3） 启动线的绘制，其中注释的线段

function drawSign(coord) {

      // 为了实现阶段性线的不同粗细程度，所以每次绘制必须重新开始一段路径

      ctx.beginPath();

      getColor(coord);

      ctx.lineTo(...preCoord);

      ctx.lineTo(...coord);

      ctx.stroke();

      ctx.closePath();

    }

二、为了美观，实现书法类似的效果，需要设每个线段设置不同的宽度才可以

　　1）根据每两个事件点的时间差计算一个倍数关系，然后乘以一个基础宽度就可以得到不同的宽度，本文实现的效果是绘制越慢线条越宽，越快线条越窄

　　2) 设置线的连接方式和线端点效果，使整个线条看起来更加圆滑

/**

     * 根据绘制时间差设置绘制线宽

     **/

    function getColor(coord) {

      if (preCoord.length === 0) {

        return;

      }

      // 当前是计算的每两个点的时间差是五毫秒的倍数

      const tempMulti = (new Date().getTime() - preCoord[2]) / 5;

      if (tempMulti > multi) {

        multi = multi * 1.4;

      } else {

        multi = multi * 0.9;

      }

      if (multi > 5) {

        multi = 5;

      }

      if (multi < 1) {

        multi = 1;

      }

      ctx.lineWidth = 2 * multi;

      // 通过设置连线效果和线端点效果可以使线条看起来更圆滑

      ctx.lineCap = 'round';

      ctx.lineJoin = 'round';

      ctx.strokeStyle = 'rgba(153, 153, 153, 1)';

    }

三、下面奉上完整的代码和效果图

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>signature</title>

</head>

<body style="text-align: center;">

  <div>

    <button id="output" style="margin: 10px;">导出</button>

  </div>

  <canvas id="canvas" width="800" height="800" style="width: 800px;height: 800px;border: 1px solid gray;"></canvas>

</body>

</html>

<script type="module">

  window.onload = (() => {

    const canvas = document.getElementById('canvas');

    const ctx = canvas.getContext('2d');

    // 上一个绘制点的坐标

    let preCoord = [];

    // 绘制启动标志

    let downFlag = false;

    // 初始线宽

    let multi = 5;

    /**

     * 按下鼠标启动绘制标记

     **/

    canvas.addEventListener('mousedown', e => {

      preCoord = [e.offsetX, e.offsetY, new Date().getTime()];

      downFlag = true;

    })

    /**

     * 鼠标松开结束绘制

     **/

    canvas.addEventListener('mouseup', e => {

      downFlag = false;

    })

    canvas.addEventListener('mouseout', () => {

      downFlag = false;

    })

    /**

     * 鼠标移动时绘制文字

     **/

    canvas.addEventListener('mousemove', e => {

      if (downFlag) {

        const coord = [e.offsetX, e.offsetY];

        drawSign(coord);

        preCoord = [...coord, new Date().getTime()];

      }

    })

    document.getElementById('output').addEventListener('click', e => {

      const a = document.createElement('a');

      a.href = canvas.toDataURL('image/png');

      a.download = 'signature.png';

      a.click();

    })

    /**

     * 根据绘制时间差设置绘制线宽

     **/

    function getColor(coord) {

      if (preCoord.length === 0) {

        return;

      }

      // 当前是计算的每两个点的时间差是五毫秒的倍数

      const tempMulti = (new Date().getTime() - preCoord[2]) / 5;

      if (tempMulti > multi) {

        multi = multi * 1.4;

      } else {

        multi = multi * 0.9;

      }

      if (multi > 5) {

        multi = 5;

      }

      if (multi < 1) {

        multi = 1;

      }

      ctx.lineWidth = 2 * multi;

      // 通过设置连线效果和线端点效果可以使线条看起来更圆滑

      ctx.lineCap = 'round';

      ctx.lineJoin = 'round';

      ctx.strokeStyle = 'rgba(153, 153, 153, 1)';

    }

    function drawSign(coord) {

      // 为了实现阶段性线的不同粗细程度，所以每次绘制必须重新开始一段路径

      ctx.beginPath();

      getColor(coord);

      ctx.lineTo(...preCoord);

      ctx.lineTo(...coord);

      ctx.stroke();

      ctx.closePath();

    }

  })

</script>

完整代码

如何通过canvas实现电子签名的更多相关文章

  1. Canvas电子签名和游戏化

    今天一天的时间都在做包团报价的无流程原型设计,一方面参考了其他系统,一方面整理先在系统中不合理的部分,规范了报价元素的分类.梳理了意向需求,其实原来粗略的放了一个模板进去是听不靠谱的.客户的要求-&g ...

  2. 做移动端电子签名发现canvas的 一些坑

    做移动端收集电子签名项目的时候发现了一些坑: 1. 移动端的手指按下.移动.抬起事件跟PC端的鼠标按下.移动.弹起事件是不一样的 2. canvas它的属性宽高和样式宽高是不一样的,通过CSS来设置c ...

  3. 表格技术七十二变|手把手教你用Canvas电子表格做电子签名

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 日常生活工作学习中,大家对电子表格必定不陌生.从工作数据汇总分析到出门收据各种电子发票,这些都是由电子表格制 ...

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

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. PHP《将画布(canvas)图像保存成本地图片的方法》

    用PHP将网页上的Canvas图像保存到服务器上的方法 2014年6月27日 歪脖骇客 发表回复 8 在几年前HTML5还没有流行的时候,我们的项目经理曾经向我提出这样一个需求:让项目评审专家们在评审 ...

  6. JS框架_(Esign.js)仿信用卡电子签名特效

    百度云盘 传送门 密码:l60w 电子签名特效效果: <!DOCTYPE html> <html> <head lang="en"> <m ...

  7. 迷你PS小程序-集成的开放式画报、油墨电子签名、图片拖拽可单独食用

    米娜桑,哦哈哟~ 个人制作,该文章主要讲解最近基于uni-app框架编写的集图文拖拽等多方位编辑.油墨电子签名.开放式海报于一体的小程序的制作思路和实现代码. 目录 1.完整源码链接 2.实现思路 3 ...

  8. Jquery电子签名制作_jSignature

    今天用Jquery的jSignature库制作一个电子签名 后台.net core上传到指定文件夹 下载jquery库 提取码:rd9g html @{ Layout = null; } <!D ...

  9. html5 canvas常用api总结(三)--图像变换API

    canvas的图像变换api,可以帮助我们更加方便的绘画出一些酷炫的效果,也可以用来制作动画.接下来将总结一下canvas的变换方法,文末有一个例子来更加深刻的了解和利用这几个api. 1.画布旋转a ...

  10. 【探索】利用 canvas 实现数据压缩

    前言 HTTP 支持 GZip 压缩,可节省不少传输资源.但遗憾的是,只有下载才有,上传并不支持.如果上传也能压缩,那就完美了.特别适合大量文本提交的场合,比如博客园,就是很好的例子. 虽然标准不支持 ...

随机推荐

  1. nginx+lua+redis实现灰度发布

    前言: 授人以鱼不如授人以渔.先学会用,在学原理,在学创造,可能一辈子用不到这种能力,但是不能不具备这种能力.这篇文章主要是沉淀使用nginx+lua+redis实现灰度,当我们具备了这种能力,随时可 ...

  2. 神经网络优化篇：详解正则化（Regularization）

    正则化 深度学习可能存在过拟合问题--高方差,有两个解决方法,一个是正则化,另一个是准备更多的数据,这是非常可靠的方法,但可能无法时时刻刻准备足够多的训练数据或者获取更多数据的成本很高,但正则化通常有 ...

  3. k8s~ingress_service_endpoint_pod四壮士

    在Kubernetes中,Service和Endpoints是两个重要的概念,它们之间存在着密切的关系. Service:Service是Kubernetes中用于定义一组Pod的访问方式的抽象.通过 ...

  4. 使用kubeadm在Centos8上部署kubernetes1.18

    // 查看系统版本 cat /etc/centos-release CentOS Linux release 8.1.1911 (Core) // 如果系统环境为8.0(云服务器默认最大安装环境为8. ...

  5. 【经典问题】mysql和redis数据一致性问题

    前言 MySQL和Redis数据一致性算是个很经典的问题,在之前也看到过很多相关的文章,最近心血来潮,想把一致性问题的解决方案和存在问题都总结一下. 不推荐方案 1 先更新MySQL,再更新Redis ...

  6. MySQL运维实战（1.2）安装部署：使用二进制安装部署

    作者:俊达 引言 上一篇我们使用了RPM进行安装部署,这是一种安装快速.简化部署和管理过程.与操作系统提供的包管理工具紧密集成的部署方法.此外,当你需要更高的灵活性和自定义性,并且愿意承担一些额外的手 ...

  7. yml与json互转、yaml转json、json转yml

    yml与json互转.yaml转json.json转yml 使用jackson下的格式化模块实现 依赖: <dependency> <groupId>com.fasterxml ...

  8. 如何延长window11更新信息？

    前言 日常使用电脑的时候,我们总是会遇到一个很常见的问题:如何关闭windows自动更新. 解决方法一: 暂停更新 解决方法二: 打开注册表: 运行 => regedit 进入: HKEY_LO ...

  9. CSS之动画

    一.动画 动画类型 CSS3 可以创建动画,它可以取代许多网页动画图像.Flash 动画和 JavaScript 实现的效果. transform属性可以定义一些主要的动画属性, translate: ...

  10. 文心一言 VS 讯飞星火 VS chatgpt （38）-- 算法导论5.4 2题

    二.假设我们将球投入到b个箱子里,直到某个箱子中有两个球.每一次投掷都是独立的并且每个球落入任何箱子的机会均等.请问投球次数期望是多少? 文心一言: 这是一个典型的鸽巢原理(Pigeonhole Pr ...