H5电子签名功能

最新推荐文章于 2025-03-06 14:50:37 发布

呱呱•.•

最新推荐文章于 2025-03-06 14:50:37 发布

阅读量3k

点赞数

分类专栏： # JavaScript # H5C3 文章标签： javascript H5 web app

本文链接：https://blog.youkuaiyun.com/alisa_lisa/article/details/113176236

版权

这篇博客详细介绍了如何利用HTML5的canvas元素来创建一个手写签名功能，包括设置画布尺寸、绘画函数、监听事件、保存及清空签名、以及将签名转换为PDF。通过JavaScript和html2canvas插件，可以实现H5应用中的电子签名并进行保存打印。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：使用canvas来实现手写签名的功能

1.准备一张画布

  <div class="signature-wrap" >
    <canvas class="canvas" ref="signCanvas" />
    <div class="btn-wrap">
      <van-button type="info" block @click="save">提 交</van-button>
      <van-button type="default" @click="rewrite" block>重 写</van-button>
    </div>
  </div>

2.利用JS设置画布的尺寸充满整个屏幕

  mounted() {
   
    this.init()
    const canvas = this.$refs.signCanvas
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight - 64
    window.onresize = () => {
   
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight - 64
    }
  },

3.设置绘画函数painting ，isSignature用来判断canvas是否有签名

  data() {
   
    return {
   
      painting: (beginX, beginY, stopX, stopY, ctx) => {
   
        ctx.beginPath() // 开启一条新路径
        ctx.globalAlpha = 1 // 设置图片的透明度
        ctx.lineWidth = 3 // 设置线宽
        ctx.strokeStyle = 'red'