Code encapsulation for Canvas

(function(window,document) {varCs2d =function(selector,options) {return NewCs2d.fn.init (selector,options);    }; Cs2d.fn= Cs2d.prototype ={init:function(selector,options) {vars = This,            //Parent Container Domp = cs2d.is_el (selector)?Selector:document.querySelector (selector),//Canvas Domc = document.createelement (' Canvas '),            //Default configurationConfig ={x:0, y:0,                //element content + padding size, excluding borders (actually included under IE), margins, scroll bar section |! +[1,] Whether IE browser does not consider IEw:p.clientwidth, h:p.clientheight}; //Resetting the configurationCs2d.extend (Config,options,true); //Add a canvas dom into the parent containerP.appendchild (c); //Set Parent Container Propertiesp.style.position = ' relative '; P.style.overflow= ' hidden '; //Set Canvas Propertiesc.id = ' Canvas_canvas_ ' + (+ +)cs2d.canvasid); C.width= CONFIG.W;//Canvas WidthC.height = config.h;//Canvas Highc.style.position = ' absolute '; C.style.zindex=Cs2d.canvasid; //parent container DOM node cacheS.parentnode =p; //Canvas DOM node cacheS.canvasnode =C; //Get canvasrenderingcontext2dS.pen = C.getcontext (' 2d '); //Get canvas width and heightS.width =C.width; S.height=C.height; //object containers that can be displayedS.childlist = []; /** * data "getter Setter"*/            //S.data = {            //Width:c.width,            //Height:c.height            // };            ////Width            //Object.defineproperty (S, ' width ', {            //get:function () {            //Console.log (this);            //return s.data.width;            //     },            //Set:function (val) {            //c.width = S.data.width = val;            //     }            // });            ////Height            //Object.defineproperty (S, ' height ', {            //get:function () {            //return s.data.height;            //     },            //Set:function (val) {            //c.height = S.data.height = val;            //     }            // });}, Show:function(){            vars = This, pen =S.pen, K; Pen.clearrect (0,0, S.width,s.height);  for(kinchs.childlist)            {s.childlist[k].show (pen);    }        }    }; //This point of the Cs2d class is directed to the Cs2d prototype Init method "i.e.: cs2d[this] = cs2d.prototype.init[this]"Cs2d.fn.init.prototype =Cs2d.fn; /** * Static properties*/    //the ID of the canvasCs2d.canvasid = 0; /** * * @Title Type "static method" * @Description get the variable type string.                * * @param {*} data need to get type variable * * @return {String} * * ' abc ' return ' String ' * true                 Return ' boolean ' * 123,nan,infinity return ' number ' * [] return ' array ' * {} Return ' object ' function () {} return ' function ' * new date return ' Date ' * NE W RegExp return ' RegExp ' * Math return ' math ' * null return ' null ' * undef   ined return ' undefined ' * Variant type * queryselector return ' html*element ' * queryselectorall Return ' nodelist ' * document.images return ' htmlcollection ' **/Cs2d.type=function(data) {returnObject.prototype.toString.call (data). Slice (8,-1). toLowerCase ();    }; /** * * @Title Empty "static method" * @Description converts the value of a variable to a Boolean value. * rule ' |null|undefined| nan|0| {}| [] is true, other variables are false * * @param {Object} data needs to be judged by the variable * * @return {Boolean} **/Cs2d.empty=function(data) {varHasprop =true, prop = ' '; if(typeofdata = = = ' object ' ) {             for(Propinchdata) {Hasprop=false;//prove that the object has a property                 Break; }            returnHasprop; }        return!data;    }; //whether to set the "static method"Cs2d.isset =function(data) {varType =cs2d.type (data); returntype!== ' null ' &&type!== ' undefined ';    }; //is the element "static method"Cs2d.is_el =function(EL) {return!! (el && El.nodetype = = 1);    }; //whether it is a null "static method"Cs2d.is_null =function(data) {returnCs2d.type (data) = = = ' null ';    }; //is the array "static method"Cs2d.is_array =function(data) {returnCs2d.type (data) = = = ' array ';    }; /** * * * @Title Extend "static method" * * @Description Object Merging * * @param {object} des source Object * * @param {array|                      Object} src Array * * @param {Boolean} override whether to override source Object * * @return {object} Returns a reference to a source object **/Cs2d.extend=function(DES, SRC, override) {vari = 0,l = 0,k =NULL; if(srcinstanceofArray) {             for(i = 0, L = src.length; i < L; i++) {cs2d.extend (DES, src[i], override); }        } Else {             for(kinchsrc) {                if(Override | |!) (kinchdes)) {Des[k]=Src[k]; }            }                    }        returndes;    }; /** * * @Title each "static method" * @Description iterator * * @param {array} obj to iterate over an array of objects * * @param {Function} Callback iterative callback method * * @param {Object} context environment variable, used as the object of this in the callback function * * @para m {*} arg parameter for incoming iteration callback function * * @throws {jsonstringify} missing parameter **/Cs2d.each=function(obj, callback, context, ARG) {varK =NULL         for(kinchobj) {Callback.call (Context||NULL, K, obj[k], ARG);    }    }; //Dynamic extension MethodsCs2d.fn.extend =function(src, override) {Cs2d.extend ( This, Src,override);    }; /** * * * @Title requestanimframe * * @Description animation method, i.e. Requestanimationframe (), and the browser-based level can be better optimized *      */    varLasttime = 0,vendors = [' ms ', ' Moz ', ' webkit ', ' o '],x = 0,XL =vendors.length;  for(; X&LT;XL &&!window.requestanimationframe;x++) {Window.requestanimationframe= Window[vendors[x] + ' requestanimationframe ']; Window.cancelanimationframe= Window[vendors[x] + ' cancelanimationframe '] | | Window[vendors[x] + ' cancelrequestanimationframe ']; }    //compatible with browsers that do not support Requestanimationframe    //if (!window.requestanimationframe) Window.requestanimationframe = function (callback, Element) {    //var currtime = new Date (). GetTime ();    //var timetocall = Math.max (0,16-(Currtime-lasttime));    //var id = window.settimeout (function () {    //Callback (Currtime + timetocall);    //},timetocall);    //lasttime = Currtime+timetocall;    //return ID;    // };    //if (!window.cancelanimationframe) Window.cancelanimationframe = function (ID) {    //window.cleartimeout (ID);    // };window.c= Window.cs2d =cs2d;}) (window,document); Cs2d.fn.extend ({//getpen:function () {    //var s = this, pen = s.pen;    //return pen;    // }});

Code encapsulation for Canvas