HTML5中canvas支持触摸屏的签名面板

1.前言最近实在是太忙了，从国庆之后的辞职，在慢慢的找工作，到今天在现在的这家公司上班大半个月了，太多的心酸泪无以言表，面试过程中，见到的坑货公司是一家又一家，好几家公司自己都只是上一天班就走了，其中有第一天上班就加班到10点的，有一家公司在体育西路那边，太远，第一天回家挤公交也是太累，以前上班都是走路上班的，自己确实不适合挤公交，还有的公司面试的时候和你说什么大数据，性能优化什么的，进公司一看，他们就是用的最简单的三层，没有什么设计模式，总之太多心酸，幸运的是现在这家公司还不错，找工作就是要宁缺毋滥。

2.canvcas标签canvas基础教程：<canvas> 标签定义图形，比如图表和其他图像。HTML5 的 canvas 元素使用javaScript 在网页上绘制图像。甚至可以在 canvas 上创建并操作动画，这不是使用画笔和油彩所能够实现的。跨所有 web 浏览器的完整 HTML5 支持还没有完成，但在新兴的支持中，canvas 已经可以在几乎所有现代浏览器上良好运行。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。来公司一个月了主要也是学习为主，我是做后台开发，以前也没有用过Oracle数据库，这一个月也主要是学习H5的一些新特新，还有就是CSS3.0，在就是Oracle在服务器上面的安装部署，一些数据导入导出，数据备份啥的，前端的东西都比较差，现在也是一个学习的机会，就当好好学习了。

3.手写签名面板公司做的是自动化办公OA系统，一些审核的地方需要加入一些手写签名的功能，刚开始做这个也是没有思路，在网上也找了一下资料，后来发现H5有这个canvcas新标签，感到格外是欣喜。于是拿过来试一下，还真可以。

4.页面代码@{

Layout=null;

}<!DOCTYPE html>

<html>

<head>

<title>Testpage</title>

</head>

<buttonclass="btn btn-PRimary"type="button"style="position:relative">点击我</button>

</body>

</html>

$(".btn,.btn-primary").click(function () {varwp =newWritingPad();//wp.init();});

});</script>

5.脚本代码一/**

* 功能：签名canvas面板初始化,为WritingPad.js手写面板js服务。

* 作者：黄金锋 (549387177@QQ.com)

* 日期：2015-11-15 15:51:01

* 版本：version 1.0*/(function(window, document, $) {'use strict';//Get a regular interval for drawing to the screenwindow.requestAnimFrame = (function(callback) {returnwindow.requestAnimationFrame ||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimaitonFrame||function(callback) {

window.setTimeout(callback,1000/60);};

})();/** Plugin Constructor*/varpluginName = 'jqSignature',

defaults={

lineColor:'#222222',

lineWidth:1,

border:'1px dashed #CCFF99',

background:'#FFFFFF',

width:500,

height:200,

autoFit:false},

canvasFixture= '<canvas></canvas>';functionSignature(element, options) {//DOM elements/objectsthis.element =element;this.$element = $(this.element);this.canvas =false;this.$canvas =false;this.ctx =false;//Drawing statethis.drawing =false;this.currentPos ={

x:0,

y:0};this.lastPos =this.currentPos;//Determine plugin settingsthis._data =this.$element.data();this.settings = $.extend({}, defaults, options,this._data);//Initialize the pluginthis.init();

}

Signature.prototype={//Initialize the signature canvasinit:function() {//Set up the canvasthis.$canvas = $(canvasFixture).appendTo(this.$element);this.$canvas.attr({

width:this.settings.width,

height:this.settings.height

});this.$canvas.css({

boxSizing:'border-box',

width:this.settings.width + 'px',

height:this.settings.height + 'px',

border:this.settings.border,

background:this.settings.background,

cursor:'crosshair'});//Fit canvas to width of parentif(this.settings.autoFit ===true) {this._resizeCanvas();

}this.canvas =this.$canvas[0];this._resetCanvas();//Set up mouse eventsthis.$canvas.on('mousedown touchstart', $.proxy(function(e) {this.drawing =true;this.lastPos =this.currentPos =this._getPosition(e);

},this));this.$canvas.on('mousemove touchmove', $.proxy(function(e) {this.currentPos =this._getPosition(e);

},this));this.$canvas.on('mouseup touchend', $.proxy(function(e) {this.drawing =false;//Trigger a change eventvarchangedEvent = $.Event('jq.signature.changed');this.$element.trigger(changedEvent);

},this));//Prevent document scrolling when touching canvas$(document).on('touchstart touchmove touchend', $.proxy(function(e) {if(e.target ===this.canvas) {

e.preventDefault();

}

},this));//Start drawingvarthat =this;

(functiondrawLoop() {

window.requestAnimFrame(drawLoop);

that._renderCanvas();

})();

},//Clear the canvasclearCanvas:function() {this.canvas.width =this.canvas.width;this._resetCanvas();

},//Get the content of the canvas as a base64 data URLgetDataURL:function() {returnthis.canvas.toDataURL();

reLoadData:function() {this.$canvas.remove();this._data =this.$element.data();//for (var i in this.settings) {//alert(i+":"+this.settings[i]);//}//this.settings = $.extend({}, defaults, this._data);this.init();

},//Get the position of the mouse/touch_getPosition:function(event) {varxPos, yPos, rect;

rect=this.canvas.getBoundingClientRect();

event=event.originalEvent;//Touch eventif(event.type.indexOf('touch') !== -1) {//event.constructor === TouchEventxPos = event.touches[0].clientX -rect.left;

yPos= event.touches[0].clientY -rect.top;

}//Mouse eventelse{

xPos= event.clientX -rect.left;

yPos= event.clientY -rect.top;

}return{

x: xPos,

y: yPos

};

},//Render the signature to the canvas_renderCanvas:function() {if(this.drawing) {this.ctx.moveTo(this.lastPos.x,this.lastPos.y);this.ctx.lineTo(this.currentPos.x,this.currentPos.y);this.ctx.stroke();this.lastPos =this.currentPos;

}

},//Reset the canvas context_resetCanvas:function() {this.ctx =this.canvas.getContext("2d");this.ctx.strokeStyle =this.settings.lineColor;this.ctx.lineWidth =this.settings.lineWidth;

},//Resize the canvas element_resizeCanvas:function() {varwidth =this.$element.outerWidth();this.$canvas.attr('width', width);this.$canvas.css('width', width + 'px');

}

};/** Plugin wrapper and initialization*/$.fn[pluginName]=function( options ) {varargs =arguments;if(options === undefined ||typeofoptions === 'object') {returnthis.each(function() {if(!$.data(this, 'plugin_' +pluginName)) {

$.data(this, 'plugin_' + pluginName,newSignature(this, options ));

}

});

}elseif(typeofoptions === 'string' && options[0] !== '_' && options !== 'init') {varreturns;this.each(function() {varinstance = $.data(this, 'plugin_' +pluginName);if(instanceinstanceofSignature &&typeofinstance[options] === 'function') {varmyArr=Array.prototype.slice.call( args, 1);

returns=instance[options].apply(instance, myArr);

}if(options === 'destroy') {

$.data(this, 'plugin_' + pluginName,null);

}//if (options === 'reLoadData') {////this.$canvas.remove();//$.data(this, 'plugin_' + pluginName, null);//this._data = this.$element.data();//this.settings = $.extend({}, defaults, options, this._data);//this.init();//}});returnreturns !== undefined ? returns :this;

}

};

})(window, document, jQuery);

6.脚本代码二/**

* 功能：使用该jQuery插件来制作在线签名或涂鸦板，用户绘制的东西可以用图片的形式保存下来。

* 作者：黄金锋 (549387177@qq.com)

* 日期：2015-11-16 13:51:01

* 版本：version 1.0*/varWritingPad =function() {varcurrent =null;

$(function() {

initHtml();

initTable();

initSignature();if($(".modal")) {

$(".modal").modal("toggle");

}else{

alert("没用手写面板");

}

$(document).on("click", "#myClose,.close",null,function() {

$('#mymodal').modal('hide');

$("#mymodal").remove();

});

$(document).on("click", "#mySave",null,function() {varmyImg = $('#myImg').empty();vardataUrl = $('.js-signature').jqSignature('getDataURL');varimg = $('<img>').attr('src', dataUrl);

$(myImg).append($('<p>').text("图片保存在这里"));

$(myImg).append(img);

});

$(document).on("click", "#myEmpty",null,function() {

$('.js-signature').jqSignature('clearCanvas');

});

$(document).on("click", "#myBackColor",null,function() {

$('#colorpanel').css('left', '95px').css('top', '45px').css("display", "block").fadeIn();//$("canvas").css("background", "#EEEEEE");$("#btnSave").data("sender", "#myBackColor");

});

$(document).on("click", "#myColor",null,function() {

$('#colorpanel').css('left', '205px').css('top', '45px').css("display", "block").fadeIn();

$("#btnSave").data("sender", "#myColor");

});

$(document).on("mouSEOver", "#myTable",null,function() {if((event.srcElement.tagName == "TD") && (current !=event.srcElement)) {if(current !=null) { current.style.backgroundColor =current._background }

event.srcElement._background=event.srcElement.style.backgroundColor;//$("input[name=DisColor]").css("background-color", event.srcElement.style.backgroundColor);//var color = event.srcElement.style.backgroundColor;//var strArr = color.substring(4, color.length - 1).split(',');//var num = showRGB(strArr);//$("input[name=HexColor]").val(num);current =event.srcElement;

}

});

$(document).on("mouseout", "#myTable",null,function() {if(current !=null) current.style.backgroundColor =current._background

});

$(document).on("click", "#myTable",null,function() {if(event.srcElement.tagName == "TD") {varcolor =event.srcElement._background;if(color) {

$("input[name=DisColor]").css("background-color", color);varstrArr = color.substring(4, color.length - 1).split(',');varnum =showRGB(strArr);

$("input[name=HexColor]").val(num);

}

});

$(document).on("click", "#btnSave",null,function() {

$('#colorpanel').css("display", "none");vartypeData = $("#btnSave").data("sender");varHexColor = $("input[name=HexColor]").val();vardata = $(".js-signature").data();if(typeData == "#myColor") {

data["plugin_jqSignature"]["settings"]["lineColor"] =HexColor;

$('.js-signature').jqSignature('reLoadData');

}if(typeData == "#myBackColor") {

data["plugin_jqSignature"]["settings"]["background"] =HexColor;

$('.js-signature').jqSignature('reLoadData');

}

});

$("#mymodal").on('hide.bs.modal',function() {

$("#colorpanel").remove();

$("#mymodal").remove();

$("#myTable").remove();

});

});functioninitHtml() {varhtml = '<div class="modal" id="mymodal">' +

'<div class="modal-dialog">' +

'<div class="modal-content">' +

'<div class="modal-header">' +

'<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>' +

'<h4 class="modal-title">手写面板</h4>' +

'</div>' +

'<div class="modal-body">' +

'<div class="js-signature" id="mySignature">' +

'</div>' +

'<div>' +

'<button type="button" class="btn btn-default" id="myEmpty">清空面板</button>' +

'<button type="button" class="btn btn-default" id="myBackColor">设置背景颜色</button>' +//'<div style="position:absolute;relative">' +'<button type="button" class="btn btn-default" id="myColor">设置字体颜色</button>' +

'<div id="colorpanel" style="position:absolute;z-index:99;display:none"></div>' +//'</div>'+'</div>' +

'</div>' +

'<div class="modal-footer">' +

'<button type="button" class="btn btn-default" id="myClose">关闭</button>' +

'<button type="button" class="btn btn-primary" id="mySave">保存</button>' +

'<div id="myImg">' +

'<div>' +

'</div>' +

'</div>';

$('body').append(html);

}functioninitTable() {varcolorTable = "";varColorHex =newArray('00', '33', '66', '99', 'CC', 'FF');varSpColorHex =newArray('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF');for(vari = 0; i < 2; i++)

{for(varj = 0; j < 6; j++)

{

colorTable= colorTable + '<tr height=12>';

colorTable= colorTable + '<td width=11 style="background-color:#000000"></td>';if(i == 0)

{

colorTable= colorTable + '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '"></td>';

}else{

colorTable= colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '"></td>';

}//colorTable = colorTable + '<td width=11 style="background-color:#000000"></td>';for(vark = 0; k < 3; k++)

{for(l = 0; l < 6; l++)

{

colorTable= colorTable + '<td width=11 style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '"></td>';

}

colorTable= colorTable + '</tr>';

}

colorTable=

'<table border="1" id="myTable" cellspacing="0" cellpadding="0" style="border-collapse: collapse;cursor:pointer;" bordercolor="000000">'

+ colorTable + '</table>' +

'<table width=225 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-collapse: collapse;background-color:#000000">' +

'<tr style="height:30px">' +

'<td colspan=21 bgcolor=#cccccc>' +

'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">' +

'<tr>' +

'<td width="3"><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>' +

'<td width="3"><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td>' +

'<td width="3"><button type="button" class="btn btn-primary btn-sm" id="btnSave">确认</button></td>' +

'</tr>' +

'</table>' +

'</td>' +

'</tr>' +

'</table>';

$("#colorpanel").append(colorTable);

}functioninitSignature() {if(window.requestAnimFrame) {varsignature = $("#mySignature");

signature.jqSignature({ width:500, height: 200, border: '1px solid red', background: '#16A085', lineColor: '#ABCDEF', lineWidth: 2, autoFit:false});//{ width: 600, height: 200, border: '1px solid red', background: '#16A085', lineColor: '#ABCDEF', lineWidth: 2, autoFit: true }}else{

alert("请加载jq-signature.js");return;

}

}functionshowRGB(arr) {

hexcode= "#";for(x = 0; x < 3; x++) {varn =arr[x];if(n == "") n = "0";if(parseInt(n) !=n)returnalert("RGB颜色值不是数字！");if(n > 255)returnalert("RGB颜色数字必须在0-255之间！");varc = "0123456789ABCDEF", b = "", a = n % 16;

b= c.substr(a, 1); a = (n - a) / 16;

hexcode+= c.substr(a, 1) +b

}returnhexcode;

}functioninit() {

}return{

init:function() {

init();

}

};

}