1.前言
最近实在是太忙了，从国庆之后辞职，在慢慢的找工作，到现在的这家公司上班大半个月了，太多的心酸泪无以言表，面试过程中，见到的坑货公司是一家又一家，好几家公司自己都只是上一天班就走了，其中有第一天上班就加班到10点的，有一家公司在体育西路那边，太远，第一天回家挤公交也是太累，以前上班都是走路上班的，自己确实不适合挤公交，还有公司面试的时候和你说什么大数据，性能优化什么的，进公司一看，他们就是用的最简单的三层，没有什么设计模式，总之太多心酸，幸运的是现在这家公司还不错，找工作就是要宁缺毋滥。
2.canvcas标签
canvas基础教程： 标签定义图形，比如图表和其他图像。html5 的canvas元素使用javascript在网页上绘制图像。甚至可以在canvas上创建并操作动画，这不是使用画笔和油彩所能够实现的。跨所有web浏览器的完整html5支持还没有完成，但在新兴的支持中，canvas已经可以在几乎所有现代浏览器上良好运行。canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。来公司一个月了主要以学习为主，我是做后台开发，以前也没有用过oracle数据库，这一个月主要是学习h5的一些新特性，还有就是css3.0，在就是oracle在服务器上面的安装部署，一些数据导入导出，数据备份啥的，前端的东西都比较差，现在也是一个学习的机会，就当好好学习了。
3.手写签名面板
公司做的是自动化办公oa系统，一些审核的地方需要加入一些手写签名的功能，刚开始做这个也是没有思路，在网上也找了一下资料，后来发现h5有这个canvcas新标签，感到格外是欣喜。于是拿过来试一下，还真可以。
4.页面代码
@{ layout = null;} testpage点击我
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 screen window.requestanimframe = (function (callback) { return window.requestanimationframe || window.webkitrequestanimationframe || window.mozrequestanimationframe || window.orequestanimationframe || window.msrequestanimaitonframe || function (callback) { window.settimeout(callback, 1000/60); }; })(); /* * plugin constructor */ var pluginname = 'jqsignature', defaults = { linecolor: '#222222', linewidth: 1, border: '1px dashed #ccff99', background: '#ffffff', width: 500, height: 200, autofit: false }, canvasfixture = ''; function signature(element, options) { // dom elements/objects this.element = element; this.$element = $(this.element); this.canvas = false; this.$canvas = false; this.ctx = false; // drawing state this.drawing = false; this.currentpos = { x: 0, y: 0 }; this.lastpos = this.currentpos; // determine plugin settings this._data = this.$element.data(); this.settings = $.extend({}, defaults, options, this._data); // initialize the plugin this.init(); } signature.prototype = { // initialize the signature canvas init: function() { // set up the canvas this.$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 parent if (this.settings.autofit === true) { this._resizecanvas(); } this.canvas = this.$canvas[0]; this._resetcanvas(); // set up mouse events this.$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 event var changedevent = $.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 drawing var that = this; (function drawloop() { window.requestanimframe(drawloop); that._rendercanvas(); })(); }, // clear the canvas clearcanvas: function() { this.canvas.width = this.canvas.width; this._resetcanvas(); }, // get the content of the canvas as a base64 data url getdataurl: function() { return this.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) { var xpos, ypos, rect; rect = this.canvas.getboundingclientrect(); event = event.originalevent; // touch event if (event.type.indexof('touch') !== -1) { // event.constructor === touchevent xpos = event.touches[0].clientx - rect.left; ypos = event.touches[0].clienty - rect.top; } // mouse event else { 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() { var width = this.$element.outerwidth(); this.$canvas.attr('width', width); this.$canvas.css('width', width + 'px'); } }; /* * plugin wrapper and initialization */ $.fn[pluginname] = function ( options ) { var args = arguments; if (options === undefined || typeof options === 'object') { return this.each(function () { if (!$.data(this, 'plugin_' + pluginname)) { $.data(this, 'plugin_' + pluginname, new signature( this, options )); } }); } else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { var returns; this.each(function () { var instance = $.data(this, 'plugin_' + pluginname); if (instance instanceof signature && typeof instance[options] === 'function') { var myarr=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(); //} }); return returns !== undefined ? returns : this; } };})(window, document, jquery);
6.脚本代码二
/** * 功能：使用该jquery插件来制作在线签名或涂鸦板，用户绘制的东西可以用图片的形式保存下来。 * 作者：黄金锋 (549387177@qq.com) * 日期：2015-11-16 13:51:01 * 版本：version 1.0 */var writingpad = function () { var current = 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 () { var myimg = $('#myimg').empty(); var dataurl = $('.js-signature').jqsignature('getdataurl'); var img = $('').attr('src', dataurl); $(myimg).append($('').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) { var color = event.srcelement._background; if (color) { $(input[name=discolor]).css(background-color, color); var strarr = color.substring(4, color.length - 1).split(','); var num = showrgb(strarr); $(input[name=hexcolor]).val(num); } } }); $(document).on(click, #btnsave, null, function () { $('#colorpanel').css(display, none); var typedata = $(#btnsave).data(sender); var hexcolor = $(input[name=hexcolor]).val(); var data = $(.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(); }); }); function inithtml() { var html = '
' + '' + '' + '' + '×close' + '手写面板' + '
' + '' + '' + '
' + '' + '清空面板' + '设置背景颜色' + //'' + '设置字体颜色' + '
' + //'
'+ '
' + '
' + '' + '关闭' + '保存' + '' + '' + '
' + '
' + '
' + '
'; $('body').append(html); } function inittable() { var colortable = ; var colorhex = new array('00', '33', '66', '99', 'cc', 'ff'); var spcolorhex = new array('ff0000', '00ff00', '0000ff', 'ffff00', '00ffff', 'ff00ff'); for (var i = 0; i '; colortable = colortable + ' '; if (i == 0) { colortable = colortable + ' '; } else { colortable = colortable + ' '; } //colortable = colortable + ' '; for (var k = 0; k '; } } colortable = colortable + ''; } } colortable = '' + colortable + '
' + '' + '' + '' + '' + '' + ' ' + ' ' + '确认 ' + '
' + '
' + ' ' + '
' + '
'; $(#colorpanel).append(colortable); } function initsignature() { if (window.requestanimframe) { var signature = $(#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; } } function showrgb(arr) { hexcode = #; for (x = 0; x 255) return alert(rgb颜色数字必须在0-255之间！); var c = 0123456789abcdef, b = , a = n % 16; b = c.substr(a, 1); a = (n - a) / 16; hexcode += c.substr(a, 1) + b } return hexcode; } function init() { } return { init: function () { init(); } };
来源博客园