基于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 相关文章推荐
一个JS小玩意 几个属性相加不能超过一个特定值.
Sep 29 Javascript
JavaScript 学习笔记(十三)Dom创建表格
Jan 21 Javascript
基于JQuery的6个Tab选项卡插件
Sep 03 Javascript
自己实现ajax封装示例分享
Apr 01 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
Vue.js中组件中的slot实例详解
Jul 17 Javascript
vue keep-alive请求数据的方法示例
May 16 Javascript
利用Blob进行文件上传的完整步骤
Aug 02 Javascript
原生JS实现轮播图效果
Oct 12 Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
前端监听websocket消息并实时弹出(实例代码)
Nov 27 Javascript
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学习笔记之一
2011/01/17 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
jQuery 处理页面的事件详解
2015/01/20 Javascript
JavaScript返回网页中锚点数目的方法
2015/04/03 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
JS 动态判断PC和手机浏览器实现代码
2016/09/21 Javascript
jquery写出PC端轮播图实例
2018/01/26 jQuery
layui实现三级导航菜单
2019/07/26 Javascript
浅谈Vue.set实际上是什么
2019/10/17 Javascript
vue使用原生swiper代码实例
2020/02/05 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
Win7上搭建Cocos2d-x 3.1.1开发环境
2014/07/03 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python面向对象之类的封装操作示例
2019/06/08 Python
Python入门Anaconda和Pycharm的安装和配置详解
2019/07/16 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
如何学习Python time模块
2020/06/03 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
美国知名艺术画网站:Art.com
2017/02/09 全球购物
财务副总经理工作职责
2013/11/25 职场文书
护理实习自我鉴定
2013/12/14 职场文书
运动会广播稿500字
2014/01/28 职场文书
小学毕业感言300字
2014/02/19 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
2014年教师节演讲稿
2014/09/03 职场文书
会议欢迎词
2015/01/23 职场文书
死者家属慰问信
2015/03/24 职场文书
答辩状格式范本
2015/05/22 职场文书
校运会班级霸气口号
2015/12/24 职场文书
小学班主任心得体会
2016/01/07 职场文书