canvas 实现签名小 demo

wade

发布于 2023-09-01 09:09:15

1960

发布于 2023-09-01 09:09:15

文章被收录于专栏：coding个人笔记

现在使用网页进行签名的业务场景非常多，自己用到的就有银行和移动办理业务的时候使用电子签名。网页实现电子签名其实也挺容易的，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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-03-20，如有侵权请联系 cloudcommunity@tencent.com 删除

canvas