基于canvas实现手写签名(vue)


Posted in Javascript onMay 21, 2020

最近一直在研究canvas的东西,正好之前对手写签名这块有点兴趣。就自己基于vue写了一个简易的手写签名demo。

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

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

具体的demo代码如下:

<template>
  <div>
    <canvas id="canvas" width="300" height="150">

    </canvas>
    <div class="btn">
     <span @click="toClear()">清除</span>
     <span @click="toSave()">保存</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: "sign-name",
    data(){
     return {
       ctx:null,
       canvas:null
     }
    },
    mounted() {
     this.initPage()
    },
    methods:{
     initPage() {
      this.canvas = document.getElementById('canvas')
      if(this.canvas.getContext){
       this.ctx = this.canvas.getContext('2d')
       let background = "#ffffff"
       this.ctx.lineCap = 'round'
       this.ctx.fillStyle = background
       this.ctx.lineWidth = 2
       this.ctx.fillRect(0,0,350,150)

       this.canvas.addEventListener("touchstart",(e)=>{
        console.log(123,e)
        this.ctx.beginPath()
        this.ctx.moveTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY)
       })

       this.canvas.addEventListener("touchmove",(e)=>{
        this.ctx.lineTo(e.changedTouches[0].pageX,e.changedTouches[0].pageY)
        this.ctx.stroke()
       })

      }
     },
     toClear() {
      this.ctx.clearRect(0,0,300,150)
     },
     toSave() {
      let base64Img = this.canvas.toDataURL()
      console.log(123,base64Img)
     }
    }

  }
</script>

<style lang="scss" scoped>
 .btn {
  height: px2Vw(55);
  position: fixed;
  bottom: 0;
  line-height: px2Vw(55);
  border-top: px2Vw(1) solid #f7f8f9;
  span {
   display: inline-block;
   width: px2Vw(185);
   text-align: center;
  }
 }
 canvas {
  position: fixed;
  border: 2px dashed #cccccc;
  float: right;
 }
</style>

代码运行后的效果图如下:

基于canvas实现手写签名(vue)

基于canvas实现手写签名(vue)

这只是个简易的demo,肯定会有很多未考虑到的地方。demo的下载地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery从头学起第二讲
Jul 04 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
javascript实现节点(div)名称编辑
Dec 17 Javascript
AngularJS语法详解
Jan 23 Javascript
实现无刷新联动例子汇总
May 20 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
微信小程序 request接口的封装实例代码
Apr 26 Javascript
微信小程序模板消息推送的两种实现方式
Aug 27 Javascript
React 父子组件通信的实现方法
Dec 05 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 jQuery
jQuery实现移动端笔触canvas电子签名
May 21 #jQuery
js cavans实现静态滚动弹幕
May 21 #Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 21 #Javascript
JavaScript实现HSL拾色器
May 21 #Javascript
js实现拾色器插件(ColorPicker)
May 21 #Javascript
原生js实现日期选择插件
May 21 #Javascript
vue+Element中table表格实现可编辑(select下拉框)
May 21 #Javascript
You might like
php执行sql语句的写法
2009/03/10 PHP
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
PHP has encountered a Stack overflow问题解决方法
2014/11/03 PHP
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
Javascript学习笔记之 函数篇(一) : 函数声明和函数表达式
2014/06/24 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
WordPress 单页面上一页下一页的实现方法【附代码】
2016/03/10 Javascript
浅析BootStrap中Modal(模态框)使用心得
2016/12/24 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
vue2.x select2 指令封装详解
2017/10/12 Javascript
详谈js中标准for循环与foreach(for in)的区别
2017/11/02 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
浅谈开发eslint规则
2018/10/01 Javascript
ES6入门教程之let、const的使用方法
2019/04/13 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
Python中扩展包的安装方法详解
2017/06/14 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
浅谈Python的方法解析顺序(MRO)
2020/03/05 Python
python Selenium 库的使用技巧
2020/10/16 Python
Python jieba库分词模式实例用法
2021/01/13 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
公民代理授权委托书
2014/09/24 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
产品调价通知函
2015/04/20 职场文书
喋血孤城观后感
2015/06/08 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
SQL基础的查询语句
2021/11/11 MySQL