html5 利用canvas手写签名并保存的实现方法
程序员文章站
2023-12-03 09:36:22
这篇文章主要介绍了html5 利用canvas手写签名并保存的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧... 18-07-12...
最近公司在做一个签名的功能,主要用到了canvas画线的功能结合移动端touch事件
js部分是这样的:
window.onload = function() { new linecanvas({ el: document.getelementbyid("canvas"),//绘制canvas的父级div clearel: document.getelementbyid("clearcanvas"),//清除按钮 saveel: document.getelementbyid("savecanvas"),//保存按钮 // linewidth:1,//线条粗细,选填 // color:"black",//线条颜色,选填 // background:"#ffffff"//线条背景,选填 }); }; function linecanvas(obj) { this.linewidth = 1; this.color = "#000000"; this.background = "#ffffff"; for (var i in obj) { this[i] = obj[i]; }; this.canvas = document.createelement("canvas"); this.el.appendchild(this.canvas); this.cxt = this.canvas.getcontext("2d"); this.canvas.width = this.el.clientwidth; this.canvas.height = this.el.clientheight; this.cxt.fillstyle = this.background; this.cxt.fillrect(0, 0, this.canvas.width, this.canvas.width); this.cxt.strokestyle = this.color; this.cxt.linewidth = this.linewidth; this.cxt.linecap = "round"; //开始绘制 this.canvas.addeventlistener("touchstart", function(e) { this.cxt.beginpath(); this.cxt.moveto(e.changedtouches[0].pagex, e.changedtouches[0].pagey); }.bind(this), false); //绘制中 this.canvas.addeventlistener("touchmove", function(e) { this.cxt.lineto(e.changedtouches[0].pagex, e.changedtouches[0].pagey); this.cxt.stroke(); }.bind(this), false); //结束绘制 this.canvas.addeventlistener("touchend", function() { this.cxt.closepath(); }.bind(this), false); //清除画布 this.clearel.addeventlistener("click", function() { this.cxt.clearrect(0, 0, this.canvas.width, this.canvas.height); }.bind(this), false); //保存图片,直接转base64 this.saveel.addeventlistener("click", function() { var imgbase64 = this.canvas.todataurl(); console.log(imgbase64); }.bind(this), false); };
这是效果图:
附上html和css
<div id="canvas"> <p id="clearcanvas">清除</p> <p id="savecanvas">保存</p> </div> html,body{ width: 100%; height: 100%; } #canvas{ width: 100%; height: 100%; position: relative; } #canvas canvas{ display: block; } #clearcanvas{ width: 50%; height: 40px; line-height: 40px; text-align: center; position: absolute; bottom: 0; left: 0; border: 1px solid #dedede; z-index: 1; } #savecanvas{ width: 50%; height: 40px; line-height: 40px; text-align: center; position: absolute; bottom: 0; right: 0; border: 1px solid #dedede; z-index: 1; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。