Javascript Signature Demo

1. Save Jquery sinature file as Jquery.signature.js:

/* http://keith-wood.name/signature.html
Signature plugin for jQuery UI v1.1.0.
Requires excanvas.js in IE.
Written by Keith Wood (kbwood{at}iinet.com.au) April 2012.
Available under the MIT (Https://github.com/jquery/jquery/blob/master/MIT-LICENSE.txt) LICENSE.
Please attribute the author if your use it. */

(function ($) {//Hide scope, no $ conflict

var signatureoverrides = {

Global defaults for signature
Options: {
Background: ' Transparent ',//' #ffffff ',//colour of the background
Color: ' #000000 ',//colour of the signature
Thickness:3,//thickness of the lines
Guideline:true,//ADD a guide line or not?
Guidelinecolor: ' #c0c0c0 ',//Guide line colour
GUIDELINEOFFSET:50,//Guide line offset from the bottom
Guidelineindent:10,//Guide line indent from the edges
Notavailable: ' Your browser doesn\ ' t support signing ',//ERROR message when no canvas
Syncfield:null,//Selector for synchronised text field
Change:null//Callback when signature changed
},

/* initialise a new signature area. */
_create:function () {
This.element.addClass (This.widgetfullname | | this.widgetbaseclass);
try {
This.canvas = $ (' <canvas id= ' Signature_canvas ' width= ' + this.element.width () + ' "height= ' +
This.element.height () + ' > ' + this.options.notAvailable + ' </canvas> ') [0];
This.element.append (This.canvas);
This.ctx = This.canvas.getContext (' 2d ');
}
catch (e) {
$ (This.canvas). Remove ();
This.resize = true;
This.canvas = document.createelement (' canvas ');
This.canvas.setAttribute (' id ', ' signature_canvas ');
This.canvas.setAttribute (' width ', this.element.width ());
This.canvas.setAttribute (' Height ', this.element.height ());
This.canvas.innerHTML = this.options.notAvailable;
This.element.append (This.canvas);
if (G_vmlcanvasmanager) {//Requires Excanvas.js
G_vmlcanvasmanager.initelement (This.canvas);
}
This.ctx = This.canvas.getContext (' 2d ');
}
This._refresh (TRUE);
This._mouseinit ();
},

/* Refresh The appearance of the signature area.
@param init (Boolean, internal) True if initialising * *
_refresh:function (init) {
if (this.resize) {
var parent = $ (This.canvas);
$ (' div ', This.canvas). css ({width:parent.width (), Height:parent.height ()});
}

This.ctx.fillStyle = This.options.background;
This.ctx.strokeStyle = This.options.color;
This.ctx.lineWidth = this.options.thickness;
This.ctx.lineCap = ' round ';
This.ctx.lineJoin = ' round ';
This.clear (init);
},

/* Clear the signature area.
@param init (Boolean, internal) True if initialising * *
Clear:function (init) {
This.ctx.fillRect (0, 0, this.element.width (), This.element.height ());
if (this.options.guideline) {
This.ctx.save ();
This.ctx.strokeStyle = This.options.guidelineColor;
This.ctx.lineWidth = 1;
This.ctx.beginPath ();
This.ctx.moveTo (This.options.guidelineIndent,
This.element.height ()-this.options.guidelineOffset);
This.ctx.lineTo (This.element.width ()-This.options.guidelineIndent,
This.element.height ()-this.options.guidelineOffset);
This.ctx.stroke ();
This.ctx.restore ();
}
This.lines = [];
if (!init) {
This._changed ();
}
},

Reinit:function () {
$ (This.canvas). Remove ();
This._create ();
},

/* synchronise changes and trigger Change event.
@param event The triggering event * *
_changed:function (event) {
if (This.options.syncField) {
$ (This.options.syncField). Val (This.tojson ());
}
This._trigger (' Change ', event, {});
},

/* Custom options handling.
@param options (object) The new option values * *
_setoptions:function (options) {
if (this._superapply) {
this._superapply (arguments); Base Widget Handling
}
else {
$. Widget.prototype._setoptions.apply (this, arguments); Base Widget Handling
}
This._refresh ();
},

See more highlights of this column: http://www.bianceng.cnhttp://www.bianceng.cn/webkf/script/