10.基于canvas实现手写签名（常见功能）

最新推荐文章于 2024-10-15 13:36:56 发布

越努力，越幸运..........

最新推荐文章于 2024-10-15 13:36:56 发布

阅读量949

点赞数

分类专栏： html 文章标签： javascript css vue.js

本文链接：https://blog.csdn.net/weixin_47254130/article/details/113854062

版权

该博客介绍了如何在移动端实现一个签名功能，利用canvas元素监听touchstart和touchmove事件，绘制用户签名轨迹。同时提供了清除签名和保存签名为base64图片的功能，通过clearRect()和toDataURL()方法实现。代码示例展示了Vue组件结构和样式布局。

摘要由CSDN通过智能技术生成

其中原理比较简单，先生成一个canvas画布，并对canvas进行touchstart和touchmove事件进行监听。当监听touchstart事件被触发时，我们开始触发canvas里的beginPath事件并且设置moveTo原始点。当监听touchmove事件则去不断去触发lineTo事件，最后stroke()。

demo里还有清除签名和保存签名的功能，分别对应了clearRect()和toDataURL()方法。

<template>
  <div class="wrap">
    <div class="signature">
      <img v-for="(item, index) in urls" :key="index" :src="item" alt="" />
      <button class="btn1" @click="ClearSignature">清除</button>
    </div>
    <div class="canvasWrap">
      <canvas id="canvas" width="300" height="350"> </canvas>
      <div class="btnWrap">
        <button class="item" @click="toClear()">取消</button>
        <button class="it