Allow excanvas to support dynamically created canvas labels (with demo files)

The well-known excanvas allows earlier ie versions to support the HTML5 standard canvas labels. Although its merits are boundless, it also leaves a small defect, for example, excanvas initializes all canvas labels at page initialization. Once the canvas tag is dynamically generated or is operated by a script before initialization, an error is reported.

Refer to an iteye blog post to add the filltext method to excanvas, which provides many enhancement and improvement methods, which are worth learning.

However, the disadvantage is that the initialization method for dynamically creating canvas labels in this article is not smart enough, and the programmer needs to initialize the code himself. In addition, excanvas initializes all canvas labels only after document preparation is complete. If there is a script executed in real time on the page that calls or creates a canvas label, an error will occur, the canvas label attributes and methods are not initialized yet.

So how can we solve this problem? How can we enable excanvas to intelligently process canvas tag initialization in various situations? It is very simple. We can hijack and reload the document method to achieve this goal. When the createelement, getelementbyid, getelementsbytagname, getelementsbyname, and getelementsbyclassname methods of the document are called, we can first get the object and then check whether the object is a canvas label that is not initialized, after the processing is complete, return the object.

The specific method is to first cache these methods with a variable, then hijack and reload these methods and redefine them as our own handler function. In a user-defined function, we first obtain the object using the original cached method, and then check whether the object is a canvas label that has not been initialized. If yes, the initialization is performed, and finally the processed object is returned. In this way, several major object acquisition methods of document are reloaded to automatically and dynamically initialize canvas.

The specific JS Code is as follows. You can add it to the last line of excanvas. js on your own to ensure that the code works in sync with excanvas.

// Intercept and reload the element acquisition method, and dynamically initialize the canvas (function () {VaR _ createelement = document. createelement; document. createelement = function (elementtag) {var OBJ = _ createelement (elementtag); If (elementtag. tolowercase () = 'canvas ') {g_vmlcanvasmanager.initelement (OBJ);} return OBJ ;}; VaR _ getelementbyid = document. getelementbyid; document. getelementbyid = function (elementid) {var OBJ = _ getelementbyid (elementid); If (obj. tagname. tolower Case () = 'canvas '&&! OBJ. getcontext) {g_vmlcanvasmanager.initelement (OBJ);} return OBJ ;}; VaR _ getelementsbytagname = document. getelementsbytagname; document. getelementsbytagname = function (elementtagname) {var OBJ = _ getelementsbytagname (elementtagname); For (VAR I = 0; I <obj. length; I ++) if (OBJ [I]. tagname. tolowercase () = 'canvas '&&! OBJ [I]. getcontext) {g_vmlcanvasmanager.initelement (OBJ [I]);} return OBJ ;}; VaR _ getelementsbyname = document. getelementsbyname; document. getelementsbyname = function (elementname) {var OBJ = _ getelementsbyname (elementname); For (VAR I = 0; I <obj. length; I ++) if (OBJ [I]. tagname. tolowercase () = 'canvas '&&! OBJ [I]. getcontext) {g_vmlcanvasmanager.initelement (OBJ [I]);} return OBJ ;}; if (! Document. getelementsbyclassname) {document. getelementsbyclassname = function (classname) {var all = Document. All? Document. ALL: document. getelementsbytagname ('*'); var elements = new array (); For (VAR I = 0; I <all. length; I ++) if (ALL [I]. classname = classname) {elements [elements. length] = All [I];} return elements;} VaR _ getelementsbyclassname = document. getelementsbyclassname; document. getelementsbyclassname = function (classname) {var OBJ = _ getelementsbyclassname (classname); For (VAR I = 0; I <obj. le Ngth; I ++) if (OBJ [I]. tagname. tolowercase () = 'canvas '&&! OBJ [I]. getcontext) {g_vmlcanvasmanager.initelement (OBJ [I]);} return OBJ ;};})();

Demonstration example (ie678_excanvassupport test .zip) download please use IE6 \ 7 \ 8 for testing.