DDR爱好者之家 Design By 杰米
最近一直在研究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>
代码运行后的效果图如下:
这只是个简易的demo,肯定会有很多未考虑到的地方。demo的下载地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年03月28日
2024年03月28日
- 苏有朋.1994-珍惜的背包(第3张)【飞碟】【WAV+CUE】
- 《宝可梦:朱紫》“蓝之圆盘”IGN7分:性能优化仍旧灾难
- 《塞尔达传说:王国之泪》大获成功!多项年度数据表现优秀
- 应景!欧任用《塞尔达传说:王国之泪》堆雪人
- 杨采妮.1996-为所欲为(国专)【EMI百代】【WAV+CUE】
- 黎姿.1993-如果真的恋爱【华纳】【WAV+CUE】
- 朱婧汐.2024-VILLAIN反派角色【StreetVoic】【FLAC分轨】
- 《喷射战士3》最新祭典公布 1月13日举办
- NS日服年度下载榜公开:《王泪》不敌《西瓜游戏》
- 科乐美《心跳回忆GS》系列推出复刻版 2月14日登陆NS
- 林峰.2012-SELF-PORTRAIT【英皇娱乐】【WAV+CUE】
- TENSION.2004-Story新歌+精丫EMI百代】【FLAC分轨】
- 草蜢.2000-环球2000超巨星系列【环球】【WAV+CUE】
- 国行Switch开启元旦折扣!《马里奥奥德赛》7折促销
- 《塞尔达》官方账号感谢玩家支持 发布王泪最新壁纸