canvas实现手写签名

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <style>
    #cvs {
      display: block;
      background-color: gray;
      border: 1px solid #000;
    }

    body {
      margin: 0;
    }

    button {
      cursor: pointer;
      padding: 0 20px;
      line-height: 60px;
      border: none;
      background-color: #abf;
      font-size: 20px;
      border-radius: 5px;
    }
  </style>
</head>

<body>

  <canvas id="cvs" width="600" height="200">
  </canvas>
  <button id="clear">清空重签</button>
  <button id="download">下载签名</button>

  <script>
    const cvs = document.querySelector('#cvs')
    const btn = document.querySelector('#clear')
    const ctx = cvs.getContext('2d')
    let isDown = false
    cvs.addEventListener('mousedown', (e) => {
      isDown = true
      ctx.moveTo(e.offsetX, e.offsetY)
      ctx.lineWidth = 5
      ctx.strokeStyle = '#fff'
    })

    cvs.addEventListener('mousemove', (e) => {
      if (!isDown) return
      ctx.lineTo(e.pageX, e.pageY)
      ctx.stroke()
    })

    cvs.addEventListener('mouseup', () => {
      isDown = false
    })

    btn.addEventListener('click', () => {
      ctx.clearRect(0, 0, cvs.width, cvs.height)
      ctx.beginPath()
    })

    // 点击保存签名图片
    const btn_d = document.querySelector('#download')
    btn_d.addEventListener('click', () => {
      // 临时画布,解决保存图片无法保存画布背景色问题
      const cvsd = document.createElement('canvas')
      cvsd.width = '600'
      cvsd.height = '200'
      cvsdContext = cvsd.getContext('2d')
      cvsdContext.fillStyle = 'gray'
      // 先在临时画布上绘制底色
      cvsdContext.fillRect(0, 0, 600, 200)
      // 新建一个临时图片对象把页面上的签名画布绑定给这个图片
      const signImg = new Image()
      signImg.src = cvs.toDataURL('png')
      signImg.onload = () => {
        // 把签名图片绘制在临时画布上  这样就有了背景色
        cvsdContext.drawImage(signImg, 0, 0, 600, 200)
        const timestamp = Date.now().toString()
        const a = document.createElement('a')
        a.download = `${timestamp}.png`
        a.href = cvsd.toDataURL('png')
        document.body.appendChild(a)
        a.click()
        a.remove()
      }
    })
  </script>
</body>

</html>

在这里插入图片描述

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值