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

最近公司在做一个签名的功能，主要用到了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;
}

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