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

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

主要介绍了html5 利用canvas手写签名并保存的实现方法的相关资料,小编觉得挺不错的，现在分享给大家，也

给大家做个参考。一起跟随小编过来看看吧

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

js部分是这样的：

window.onload = function() {

new lineCanvas({

el: document.getElementById("canvas"),//绘制canvas的父级div

};

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.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.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);

};