canvas 实现签名小 demo

最新推荐文章于 2024-05-03 11:47:20 发布

wade3po

最新推荐文章于 2024-05-03 11:47:20 发布

阅读量104

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/wade3po/article/details/129669829

版权

现在使用网页进行签名的业务场景非常多，自己用到的就有银行和移动办理业务的时候使用电子签名。网页实现电子签名其实也挺容易的，canvas 标签非常容易实现，再加上可以导出签名图片，几十行代码就实现了。

<body>
    <canvas></canvas>
    <div>
        <button onclick="cancel()">取消</button>
        <button onclick="save()">保存</button>
    </div>
</body>
<script>
    const canvas = document.querySelector('canvas');
    canvas.width = 500;
    canvas.height = 300;
    canvas.style.border = '1px solid #000';
    const ctx = canvas.getContext('2d');

    ctx.lineWidth = 3;//线宽
    ctx.strokeStyle = 'red';//线颜色
    ctx.lineCap = 'round';//线条的结束端点样式
    ctx.lineJoin = 'round';//两条线相交时，所创建的拐角类型

    const mobileStatus = (/Mobile|Android|iPhone/i.test(navigator.userAgent));

    const start = event => {
      const { offsetX, offsetY, pageX, pageY } = mobileStatus ? event.changedTouches[0] : event;
      ctx.beginPath();//起始一条路径，或重置当前路径
      ctx.moveTo(pageX, pageY);//把路径移动到画布中的指定点，不创建线条
      window.addEventListener(mobileStatus ? "touchmove" : "mousemove", draw);
    }

    const draw = event => {
      const { pageX, pageY } = mobileStatus ? event.changedTouches[0] : event;
      ctx.lineTo(pageX , pageY );//添加一个新点，然后在画布中创建从该点到最后指定点的线条
      ctx.stroke();//绘制已定义的路径
    }
    const cloaseDraw = () => {
      window.removeEventListener("mousemove", draw);
    }

    window.addEventListener(mobileStatus ? "touchstart" : "mousedown", start);
    window.addEventListener(mobileStatus ? "touchend" :"mouseup", cloaseDraw);

    const cancel = () => {
      ctx.clearRect(0, 0,500, 300);//在给定的矩形内清除指定的像素
    }

    const save = () => {
      canvas.toBlob(blob => {
          const date = Date.now().toString();
          const a = document.createElement('a');
          a.download = `${date}.png`;
          a.href = URL.createObjectURL(blob);
          a.click();
          a.remove();
      })
    }
</script>

toBlob 居然在 w3cschool 没有，MDN 有详细的介绍。兼容了移动端，其实就是监听 touch 还是 mouse 事件的区别。

也可以到GitHub下载这个文件https://github.com/wade3po/demoCode

欢迎关注订阅号 coding个人笔记

wade3po

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas 实现签名小 demo

现在使用网页进行签名的业务场景非常多，自己用到的就有银行和移动办理业务的时候使用电子签名。网页实现电子签名其实也挺容易的，canvas 标签非常容易实现，再加上可以导出签名图片，几十行代码就实现了。
复制链接

扫一扫