找工作心酸记
最近真的超级忙！国庆后辞掉工作，又开始找新工作，就像玩过山车似的。面试时遇到各种奇葩公司，真是让人心累！有些公司不停地招人，但大部分人都很快离职；还有些公司吹嘘自己技术要求高得不得了。幸运的是我现在找到这家还挺靠谱的，找工作可得挑仔细！
找工作的时候，我遇到过不少情况噢。有的公司宣传大数据啦、性能优化啥的，结果进去发现，就用了个最基础的三层架构，连设计模式都没用到；还有一家公司在体育西路那边，每天下班挤公交回家累得够呛。这些找工路途上的磨难，让我真切地明白了找份好工作不容易！
新工作的第一个月，主要是各种学。虽然是后台开发，之前没碰过Oracle数据库，就先从H5新功能、CSS3.0和怎么把Oracle装到服务器上下手学起。前端方面还有待提高，不过现在正好可以学到好多。
HTML5 Canvas基础教程
Canvas元素就是个矢量图板，让你在网页上玩转图像！用JavaScript操控它，随心所欲绘制好#图中插画、#图形统计表乃至炫酷的动画~与传统绘画相比起来，不用再繁琐沉重的拿着画笔和颜料创作，使用canvas更能让你随心所欲地展示和呈现视觉效果！
尽管现在咱们的网页还不能全盘兼容HTML5，但是大部分现代化浏览器用canvas都没问题！这儿有各种办法画路径、矩形、圆圈、字儿甚至是图片，让你随心所欲地进行创作哟~
想起我们需要给办公自动化系统加个手写签名功能，网上查了下，HTML5增加了canvas这个新标签，让加手写签名变得更容易，更随手。有了这个神器，我们就能在公司网页上搞出一个手写签名板，而且搞起来还很简单，超快捷！
手写签名面板
搞那个公司的OA系统时，差点卡壳在要加个签名的问题上，不知道咋整。后来上网查了下资料才知道HTML5里有个新的canvas标签能画图，试一试就搞定了手写签名版这个难题。
用canvas做个签到板，直接又好用。利用Javascript，你可以通过鼠标或触摸屏一边画，一边记录你的签名。这样一来，你用得更爽快，系统后台审批起来也更方便有效率！
页面代码
制作手写签名啥的，要搞定这个功能得把网页设计出来才行。首先，咱得用html弄个空地儿，里面弄个canvas元素，然后给它套上合适的样式和属性，这样才能让网页看起来和设计图对得上号！这个网页设计好了，用户用起手写签名来就方便多了。
脚本代码一
@{
Layout = null;
}
Testpage
$(function () {
$(".btn,.btn-primary").click(function () {
var wp = new WritingPad();
//wp.init(); });
});
除了搞懂页面代码，做手写签名功能还得写个javascript小代码，这是用来控制那个canvas元素的动向的。它就是干着几点事儿：先看你在敲什么，接着找鼠标或者触屏在哪儿碰了，最后把你写字的那些动作画到canvas上去。合理写这个小代码可以让你写字更顺畅，也更精准！
脚本代码二
首先，我们得快点搞定用户输入数据的问题。校验和存储都不能少！这样才能确保系统稳定，数据也安全。再说代码这块儿，咱们得多加思考怎么优化，还有如何处理可能出现的错误。你知道吗？这都是为了让系统运行起来更流畅，同时提高用户的使用感受喔。
/**
* 功能：签名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);
登录然后复制，这是OA系统中保护手写签名不被篡改、未经许可不能乱复制的重要环节！只有通过认证和分配复制权限，才能让病毒或者捣蛋鬼们无法随意篡改数据，也不能偷偷复制文件。
评论0