html5 利用canvas手写签名并保存的实现方法

最近公司在做一个签名的功能，主要用到了canvas画线的功能结合移动端touch事件

js部分是这样的：

window.onload = function() {    new linecanvas({        el: document.getelementbyid("canvas"),//绘制canvas的父级div        clearel: document.getelementbyid("clearcanvas"),//清除按钮        saveel: document.getelementbyid("savecanvas"),//保存按钮        //      li江城子秦观大年初一头一天newidth: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), fal);    //绘制中    this.canvas.addeventlistener("touchmove", function(e) {        this.cxt.lineto(e.changedtouches[0].pagex, e.changedtouches[0].pagey);        this.cxt.stroke();    }.bind(this), fal);    //结束绘制    this.canvas.addeventlistener("touchend", function() {        this.cxt.clopath();    }.bind(this), fal);    //清除画布    this.clearel.addeventlistener("click", function() {        this.cxt.clearr阿冷为什么被永久封ect(0, 0, this.canvas.width, this.canvas.height);    }.bind(this), fal);    //保存图片，直接转ba64    this.saveel.addeventlistener("click", function() {        var imgba64 = this.canvas.todataurl();        console.log(imgba64);    }.bind(this), fal);};

这是效果图：

附上html和css

<div id="canvas">    <p id="clearcanvas">清除</p>    <p id="savecanvas">保存</p></div>html,body{    width: 100%;    height: 100%1海里等于几公里;}#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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。