最近實(shí)在是太忙了，從國慶之后的辭職，在慢慢的找工作，到今天在現(xiàn)在的這家公司上班大半個(gè)月了，太多的心酸淚無以言表，面試過程中，見到的坑貨公司是一家又一家，好幾家公司自己都只是上一天班就走了，其中有第一天上班就加班到10點(diǎn)的，有一家公司在體育西路那邊，太遠(yuǎn)，第一天回家擠公交也是太累，以前上班都是走路上班的，自己確實(shí)不適合擠公交，還有的公司面試的時(shí)候和你說什么大數(shù)據(jù)，性能優(yōu)化什么的，進(jìn)公司一看，他們就是用的最簡單的三層，沒有什么設(shè)計(jì)模式，總之太多心酸，幸運(yùn)的是現(xiàn)在這家公司還不錯(cuò)，找工作就是要寧缺毋濫。
canvas基礎(chǔ)教程：<canvas> 標(biāo)簽定義圖形，比如圖表和其他圖像。HTML5 的 canvas 元素使用 javaScript 在網(wǎng)頁上繪制圖像。甚至可以在 canvas 上創(chuàng)建并操作動(dòng)畫，這不是使用畫筆和油彩所能夠?qū)崿F(xiàn)的。跨所有 web 瀏覽器的完整 HTML5 支持還沒有完成，但在新興的支持中，canvas 已經(jīng)可以在幾乎所有現(xiàn)代瀏覽器上良好運(yùn)行。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。來公司一個(gè)月了主要也是學(xué)習(xí)為主，我是做后臺(tái)開發(fā)，以前也沒有用過Oracle數(shù)據(jù)庫，這一個(gè)月也主要是學(xué)習(xí)H5的一些新特新，還有就是CSS3.0，在就是Oracle在服務(wù)器上面的安裝部署，一些數(shù)據(jù)導(dǎo)入導(dǎo)出，數(shù)據(jù)備份啥的，前端的東西都比較差，現(xiàn)在也是一個(gè)學(xué)習(xí)的機(jī)會(huì)，就當(dāng)好好學(xué)習(xí)了。
公司做的是自動(dòng)化辦公OA系統(tǒng)，一些審核的地方需要加入一些手寫簽名的功能，剛開始做這個(gè)也是沒有思路，在網(wǎng)上也找了一下資料，后來發(fā)現(xiàn)H5有這個(gè)canvcas新標(biāo)簽，感到格外是欣喜。于是拿過來試一下，還真可以。
@{ Layout = null;}<!DOCTYPE html><html><head> <meta name="viewport" content="width=device-width" /> <title>Testpage</title> <script src="~/Assets/jquery-2.1.1.js"></script> <script src="~/Assets/bootstrap/bootstrap.js"></script> <link href="~/Assets/bootstrap/bootstrap.css" rel="stylesheet" /> <script src="~/Scripts/WritingPad.js"></script> <script src="~/Assets/jq-signature.js"></script></head><body style="background-color:#b6ff00"> <button class="btn btn-PRimary" type="button" style="position:relative">點(diǎn)擊我</button></body></html><script> $(function () { $(".btn,.btn-primary").click(function () { var wp = new WritingPad(); //wp.init(); }); });</script>
/** * 功能：簽名canvas面板初始化,為WritingPad.js手寫面板js服務(wù)。 * 作者：黃金鋒 (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 = '<canvas></canvas>'; 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);
/** * 功能：使用該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 = $('<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") { 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 = '<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">設(shè)置背景顏色</button>' + //'<div style="position:absolute;relative">' + '<button type="button" class="btn btn-default" id="myColor">設(shè)置
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
