Order: On http://www.sitepoint.com/ a blog, guide me to a great web development site http://www.walterzorn.com/, and get one there WZ_JSGRAPHICS.JS developed only with DHTML and Javscript technology (thanks to Walter Zorn developed this graphic library), using it to draw beautiful vector graphics on your web page. The introduction page of this graphics library http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm, is reflected in the common geometric graphics such as folding, polygon, circle, etc., I originally thought it was some pictures, when I saw this line of tab. SHESE ARE NOT Image Files. Shapes & Text Have Been after, and after reading the instructions about it, I realized that the display vector can be drawn on the webpage in addition to the VML and SVG. Graphics, only DHTML and JavaScript can also do it all! Is it very surprised? (Double click this document, look at the vector graphics after zooming), ok! Nustey talk less, let me introduce this graphic library in detail.
★ Overview (OVERVIEW)
This graphics library uses DHTML and JavaScript technology, which can draw lines, circles, ellipses, fold lines, polygons, rectangles. It is also very easy to use this graphic library for people who don't know JavaScript, in addition, the graphics drawn using this graphics library is completely optimized to pixel level!
★ Try to draw several graphics by a given parameter (TRY IT OUT)
★ Performance
In HTML, there is no set of graphic representation elements similar to wire, circle, ellipse or other non-rectangular graphics. In the workspace, we can use, and set up a Div (or Layer) element with a background color, and reduce these DIV elements to the size of the pixel, each DIV element represents a pixel, then use the DIV element on the web page Drawing. When we use these DIV models to draw vector graphics, we should avoid some redundant access, look at the following figure:
From left to right, the leftmost is the least painted, take a closer look, there will be a DIV connection at each line of stepped shape, this div is not used, it should be deleted; It is already very good, but it should be optimized, with the first behavior: a line of three DIV performance levels is redundant, it should be combined, and the DIV in the same vertical direction should also be merged (eg, the end of the step).
Press Walter Zorn to get better performance when drawing vector graphics, and avoid some of the above redundants, he uses the best, fastest algorithm, only use the least, and the necessary DIV elements to draw Graphic.
It should be noted that do not compare this graphics library with graphical applications developed with Java languages or other languages, you must know, subject to basic HTML and browser constraints, create a DIV element with JavaScript scripting language is very slow, The optimization of graphics drawing is already the best result. When using this graphic library, the drawn pixels are best not to exceed 600 - 1000 pixels.
Should I choose SVG? There are currently a browser with SVG capabilities or browsers using SVG plugins remain a few, so if you want to draw some simple vector graphics, use this vector graphics library or a good choice. ★ Browser compatibility
Linux system: browsers with gecko-engine (Mozilla, Netscape 6 , Galeon), Konquer 3.0.3 (very slow), Netscape 4, Opera 5 and 6. Windows System: Gecko-Browsers, IE 4, 5 and 6, Netscape 4, Opera 5, 6 and 7.
Note: If you are complete after the page is loaded, use this vector graphics library to draw, not executed in the Opera version 7, Netscape version 4 will not be executed. Conversely, when the HTML page is being parsed, use this graphics library to draw all browsers.
★ How to use this vector graphic library?
1 . Contains this library to insert the following code to the beginning of your HTML file (between
and ):