html电子签名
html5实现手写签名板，点击保存即可生成base64格式的图片
使用H5自带的canvas，无需引入js无需引入别的js
效果图
html代码
<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><link rel="icon" href="yiyuan.ico" type="image/x-icon" /><link rel="shortcut icon" href="yiyuan.ico" type="image/x-icon"/><script type="text/javascript" src="js/jquery.js"></script><title>电子签名</title>
</head>
<style type="text/css">*{margin: 0;padding: 0;}.canvas {/*width: 100%;*/display: block;border: 1px solid red;}#clear {margin: 0 auto;display: inline-block;padding: 5px 10px;width: 100px;height: 40px;line-height: 40px;border: 1px solid #eee;background: #e1e1e1;border-radius: 10px;text-align: center;margin: 20px auto;cursor: pointer;}#save {margin: 0 auto;display: inline-block;padding: 5px 10px;width: 100px;height: 40px;line-height: 40px;border: 1px solid #eee;background: #e1e1e1;border-radius: 10px;text-align: center;margin: 20px auto;cursor: pointer;}
</style>
<input type="hidden" id="tjbh" value="${tjbh}">
<input type="hidden" id="signType" value="${signType}">
<body data-ext-version="1.4.2">
<div style="text-align: center"><canvas id="canvas" width="400" height="200" style="border:1px solid #000000;">您的浏览器不支持canvas技术,请升级浏览器!</canvas><div><span id="clear">清空签名板</span><span id="save">保存签名</span></div>
</div>
</body>
<script type="text/javascript">function WriteFont(id, options) {var self = this;this.canvas = document.getElementById(id);var obj = {canvas: this.canvas,context: this.canvas.getContext("2d"),isWrite: false, //是否开始lastWriteTime: -1,lastWriteSpeed: 0,lastWriteWidth: 0,canvasWidth: 400, //canvas宽高canvasHeight: 200,isShowBorder: true, //是否显示网格bgColor: '#fff', //背景色borderWidth: 2, // 网格线宽度borderColor: "#fff", //网格颜色lastPoint: {}, //writeWidth: 2, //基础轨迹宽度maxWriteWidth: 30, // 写字模式最大线宽minWriteWidth: 1, // 写字模式最小线宽writeColor: '#000', // 轨迹颜色isWriteName:false //签名模式}for(var name in options) {obj[name] = options[name];}/*** 轨迹宽度*/this.setLineWidth = function() {var nowTime = new Date().getTime();var diffTime = nowTime - obj.lastWriteTime;obj.lastWriteTime = nowTime;var returnNum = obj.minWriteWidth + (obj.maxWriteWidth - obj.minWriteWidth) * diffTime / 30;if(returnNum < obj.minWriteWidth) {returnNum = obj.minWriteWidth;} else if(returnNum > obj.maxWriteWidth) {returnNum = obj.maxWriteWidth;}returnNum = returnNum.toFixed(2);//写字模式和签名模式if(obj.isWriteName){obj.context.lineWidth = obj.writeWidth;}else{obj.context.lineWidth = obj.lastWriteWidth = obj.lastWriteWidth / 4 * 3 + returnNum / 4;}}/*** 绘制轨迹*/this.writing = function(point) {obj.context.beginPath();obj.context.moveTo(obj.lastPoint.x, obj.lastPoint.y);obj.context.lineTo(point.x, point.y);self.setLineWidth();obj.context.stroke();obj.lastPoint = point;obj.context.closePath();}/*** 轨迹样式*/this.writeContextStyle = function() {obj.context.beginPath();obj.context.strokeStyle = obj.writeColor;obj.context.lineCap = 'round';obj.context.lineJoin = "round";}/*** 写开始*/this.writeBegin = function(point) {obj.isWrite = true;obj.lastWriteTime = new Date().getTime();obj.lastPoint = point;self.writeContextStyle();}/*** 写结束*/this.writeEnd = function() {obj.isWrite = false;}/*** 清空画板*/this.canvasClear = function() {obj.context.save();obj.context.strokeStyle = '#fff';obj.context.clearRect(0, 0, obj.canvasWidth, obj.canvasHeight);if(obj.isShowBorder && !obj.isWriteName) {obj.context.beginPath();var size = obj.borderWidth / 2;//画外面的框obj.context.moveTo(size, size);obj.context.lineTo(obj.canvasWidth - size, size);obj.context.lineTo(obj.canvasWidth - size, obj.canvasHeight - size);obj.context.lineTo(size, obj.canvasHeight - size);obj.context.closePath();obj.context.lineWidth = obj.borderWidth;obj.context.strokeStyle = obj.borderColor;obj.context.stroke();//画里面的框obj.context.moveTo(0, 0);obj.context.lineTo(obj.canvasWidth, obj.canvasHeight);obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);obj.context.lineTo(obj.canvasWidth, obj.canvasHeight / 2);obj.context.lineTo(0, obj.canvasHeight / 2);obj.context.lineTo(0, obj.canvasHeight);obj.context.lineTo(obj.canvasWidth, 0);obj.context.lineTo(obj.canvasWidth / 2, 0);obj.context.lineTo(obj.canvasWidth / 2, obj.canvasHeight);obj.context.stroke();}obj.context.restore();}/*** 保存图片 格式base64*/this.saveAsImg = function() {var image = new Image();image.src = this.canvas.toDataURL("image/png");if(image.src == this.emptyCanvas) {alert('请先签名')return;}if(!confirm("你确定提交当前的签名吗?")){console.log("你确定提交当前的签名吗?-->NO");return;}var base64Image=image.src;console.log('提交的内容===>', image.src)};/*** 初始化画板*/this.canvasInit = function() {this.canvas.width = obj.canvasWidth;this.canvas.height = obj.canvasHeight;this.emptyCanvas = this.canvas.toDataURL("image/png");}/**======================事件绑定===========================**/this.canvas.addEventListener('mousedown', function(e) {var point = {x: e.offsetX || e.clientX,y: e.offsetY || e.clientY};self.writeBegin(point);});this.canvas.addEventListener('mouseup', function(e) {var point = {x: e.offsetX,y: e.offsetY};self.writeEnd(point);});this.canvas.addEventListener('mouseleave', function(e) {var point = {x: e.offsetX,y: e.offsetY};self.writeEnd(point);});this.canvas.addEventListener('mousemove', function(e) {if(obj.isWrite) {var point = {x: e.offsetX,y: e.offsetY};self.writing(point);}});//移动端this.canvas.addEventListener('touchstart', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX || touch.clientX,y: touch.pageY || touch.clientY};self.writeBegin(point);});this.canvas.addEventListener('touchend', function(e) {var touch = e.changedTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writeEnd(point);});this.canvas.addEventListener('touchmove', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writeEnd(point);});this.canvas.addEventListener('touchmove', function(e) {var touch = e.targetTouches[0];var point = {x: touch.pageX,y: touch.pageY};self.writing(point);});this.canvasInit();this.canvasClear();this.option = obj;obj.control = {clearCanvas: self.canvasClear};}/*** 初始化调用* 设置参数*/var writeCanvas = new WriteFont('canvas', {borderWidth: 10,writeWidth:3,borderColor: '#ff6666',isWriteName:true //签名模式});document.getElementById('clear').onclick = function() {writeCanvas.option.control.clearCanvas();};document.getElementById('save').onclick = function() {writeCanvas.saveAsImg()};
</script>
</html>
