HTML5 hand-written canvas implementation

Trial support Canvas Browser, no JS dependency, the use of new HTML5 technology
Drawboard.renderdrawer (' Myhandwrite ', {
PenColor: ' #FF0000 ',
Penwidth: ' 1px '
});
Render the entire drawing board in just a piece of code
? 1. File Drawer.js
/**
* @class Canvas Drawboard
* @author Jason <[email protected]>
* @version 1.1
* @singleton
* @fileoverview
* Build DATE:2014/04/12
* The application is valid in a browser that supports HTML5 canvas object.
* A Default canvas tag would render to the div you have appointed
* Can use this application-like this:
* Drawboard.renderdrawer (' Myhandwrite ', {
* PenColor: ' #FF0000 ',
* Penwidth: ' 1px '
*      });
* If You need a text background,this would help:
* Drawboard.formattext (' sign here ');
* See {@link drawboard.renderdrawer} for more details
*/
var Drawboard/*drawboard object */={};
Drawboard.id= "";
Drawboard.pencolor= "#FF0000";
drawboard.penwidth=0;
drawboard.mousex/* mouse position x*/=0;
drawboard.mousey/* mouse position y*/=0;
Drawboard.ismousedown/**/=false;
Drawboard.ismousemove/**/=false;
Drawboard.mousepath/**/=new Array ();
DRAWBOARD.MOUSEPOSITION/**/={X:0,Y:0};
drawboard.events/* Event List */={
onmousemove/* Mouse Movement */:function (e) {
var Me=drawboard;
var ctx=me. Context;
var canvas=me. Canvas;
if (Me.ismousedown) {
if (me.ismousemove) {
Ctx.moveto (Me.mousex,me.mousey);
Me.ismousemove=false;
}
Me.mousex= E.layerx;
Me.mousey= e.layery+32;
me.mouseposition={"x": Me.mousex, "y": Me.mousey};
Me.mousePath.push (me.mouseposition);
Ctx.lineto (Me.mousex, Me.mousey);
Ctx.stroke ();
}
},
onmousedown/* Mouse Press */:function (e) {
var Me=drawboard;
var ctx=me. Context;
var canvas=me. Canvas;
Canvas.style.bordercolor= "#808080";
var rect=canvas.getboundingclientrect ();
Me.ismousedown=true;
Me.ismousemove=true;
Calculate mouse location only for Firefox
Me.mousex= E.layerx;
Me.mousey= e.layery+32;
if (me.mousepath.length==0) {
Me.redo ();
}
},
onmouseout/* Mouse move out of */:function (e) {
var Me=drawboard;
Me.ismousedown=false;
},
onmouseup/* Mouse Release */:function (e) {
var Me=drawboard;
var ctx=me. Context;
var canvas=me. Canvas;
Canvas.style.bordercolor= "#C0C0C0";
Me.ismousedown=false;
}
};

/**
* Render a child element to the node-has a id attribute which values @param ID
* @param {String} ID the name that canvas would render as it's child element
* @param {Object} option the pen color
* @argument {String} pencolor RGB (0,0,0) or #000000 color
* @argument {String} penwidth pen width in pixel
* @argument {Int} width Canvas board width
* @argument {Int} height Canvas board height
*/

drawboard.renderdrawer/* Render drawing Object */=function (id,option) {
var Me=drawboard;
var p=option;
Me. Id=id;
me.pencolor=p.pencolor| | Me.pencolor;
Me.penwidth= P.penwidth;
var Objcontainer=document.getelementbyid (ID);
Initializing a canvas element
var Objcanvas=document.getelementbyid (' Drawboard ') | | Document.createelement (' canvas ');
With (Objcanvas) {
Width= p.width| | 720;
height= p.height| | 400;
Id= ' Drawboard ';
style.margin= ' Auto ';
Style.border= "1px solid #C0C0C0";
Style.borderradius= "4px";
style.position= "Absolute";
Style.cursor= "url (images/site/pencil.gif), auto";
}
Objcontainer.appendchild (Objcanvas);
var ctx=objcanvas.getcontext (' 2d ');
Initializing the Canvas context object
With (CTX) {
linewidth/* line width */=me.penwidth;
strokestyle/* depicting color */=me.pencolor;
fillstyle/* Fill Color */=me.pencolor;
linecap/* thread style */= "round";
linejoin/* Corner style */= "Round";
miterlimit/* chamfer sharpness */=1;
Shadowcolor= ' #FC0000 ';
Shadowblur=1;
}
Attaching events to a canvas element
Objcanvas.addeventlistener ("MouseMove", Me. Events.onmousemove,false);
Objcanvas.addeventlistener ("Mouseout", Me. Events.onmouseout,false);
Objcanvas.addeventlistener ("MouseUp", Me. Events.onmouseup,false);
Objcanvas.addeventlistener ("MouseDown", Me. Events.onmousedown,false);
Objcanvas.addeventlistener ("ContextMenu", Drawboard.redo,false);
Assignment Object http://www.huiyi8.com/hunsha/hanshi/?
Me. Canvas=me. canvas| | Objcanvas;
Me. Context=me. context| | CTx
} Korean wedding photos
drawboard.redo/* Empty All Forms */=function () {
var Me=drawboard;
var canvas=me. Canvas;
var ctx=me. Context;
Ctx.clearrect (0,0,canvas.width,canvas.height);
Canvas.width=canvas.width;
Empty mouse Path Array
Me.mousePath.splice (0,me.mousepath.length);
Me.renderdrawer (Me. Id,me.pencolor,me.penwidth);
};
drawboard.formattext/* Draw a watermark */=function (text) {
var Me=drawboard;
var canvas=me. Canvas;
var ctx=me. Context;
ctx.font/* Font */= "100px song Body";
Ctx.filltext (text,100,200);
Ctx.stroke ();
};
Take PNG data type
Drawboard.getimage=function () {
Return drawboard.context!=null? DrawBoard.Canvas.toDataURL (' image/png '): "";
}
Drawboard.download=function () {

}

/**
* POST your data to the server
* @param option
* @argument {String} method ' POST ' or ' GET ' is valid
* @argument {String} URL the address to post to
* @argument {String} isdirect if true to use a asynchronous method,or false
* @argument {Function} onsuccess the method to be called upon the success of the request
*/
Drawboard.post=function (option) {
var p=option;
var request=new xmlhttprequest () | | Window. ActiveXObject ("Microsoft.XMLHTTP");
Request.onreadystatechange=function () {
if (request.readystate==4) {
if (request.status==200) {
eval (option.onsuccess);
}else{

}
}else{

}
};
Request.open (p.method| | ' POST ', P.url, p.isdirect| | true);
Request.send (P.params)
}
?

HTML5 hand-written canvas implementation