jsgraphics 图形库

1、wz_jsgraphics.js

/* This notice must be untouched at all times.wz_jsgraphics.js    v. 3.05The latest version is available athttp://www.walterzorn.comor http://www.devira.comor http://www.walterzorn.deCopyright (c) 2002-2009 Walter Zorn. All rights reserved.Created 3. 11. 2002 by Walter Zorn (Web: http://www.walterzorn.com )Last modified: 2. 2. 2009Performance optimizations for Internet Explorerby Thomas Frank and John Holdsworth.fillPolygon method implemented by Matthieu Haller.High Performance JavaScript Graphics Library.Provides methods- to draw lines, rectangles, ellipses, polygonswith specifiable line thickness,- to fill rectangles, polygons, ellipses and arcs- to draw text.NOTE: Operations, functions and branching have rather been optimizedto efficiency and speed than to shortness of source code.LICENSE: LGPLThis library is free software; you can redistribute it and/ormodify it under the terms of the GNU Lesser General PublicLicense (LGPL) as published by the Free Software Foundation; eitherversion 2.1 of the License, or (at your option) any later version.This library is distributed in the hope that it will be useful,but WITHOUT ANY WARRANTY; without even the implied warranty ofMERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNULesser General Public License for more details.You should have received a copy of the GNU Lesser General PublicLicense along with this library; if not, write to the Free SoftwareFoundation, Inc., 59 Temple Place, Suite 330, Boston, MA  02111-1307  USA,or see http://www.gnu.org/copyleft/lesser.html*/var jg_ok, jg_ie, jg_fast, jg_dom, jg_moz;function _chkDHTM(wnd, x, i)// Under XUL, owner of 'document' must be specified explicitly{x = wnd.document.body || null;jg_ie = x && typeof x.insertAdjacentHTML != "undefined" && wnd.document.createElement;jg_dom = (x && !jg_ie &&typeof x.appendChild != "undefined" &&typeof wnd.document.createRange != "undefined" &&typeof (i = wnd.document.createRange()).setStartBefore != "undefined" &&typeof i.createContextualFragment != "undefined");jg_fast = jg_ie && wnd.document.all && !wnd.opera;jg_moz = jg_dom && typeof x.style.MozOpacity != "undefined";jg_ok = !!(jg_ie || jg_dom);}function _pntCnvDom(){var x = this.wnd.document.createRange();x.setStartBefore(this.cnv);x = x.createContextualFragment(jg_fast? this._htmRpc() : this.htm);if(this.cnv) this.cnv.appendChild(x);this.htm = "";}function _pntCnvIe(){if(this.cnv) this.cnv.insertAdjacentHTML("BeforeEnd", jg_fast? this._htmRpc() : this.htm);this.htm = "";}function _pntDoc(){this.wnd.document.write(jg_fast? this._htmRpc() : this.htm);this.htm = '';}function _pntN(){;}function _mkDiv(x, y, w, h){this.htm += '<div style="position:absolute;'+'left:' + x + 'px;'+'top:' + y + 'px;'+'width:' + w + 'px;'+'height:' + h + 'px;'+'clip:rect(0,'+w+'px,'+h+'px,0);'+'background-color:' + this.color +(!jg_moz? ';overflow:hidden' : '')+';"><\/div>';}function _mkDivIe(x, y, w, h){this.htm += '%%'+this.color+';'+x+';'+y+';'+w+';'+h+';';}function _mkDivPrt(x, y, w, h){this.htm += '<div style="position:absolute;'+'border-left:' + w + 'px solid ' + this.color + ';'+'left:' + x + 'px;'+'top:' + y + 'px;'+'width:0px;'+'height:' + h + 'px;'+'clip:rect(0,'+w+'px,'+h+'px,0);'+'background-color:' + this.color +(!jg_moz? ';overflow:hidden' : '')+';"><\/div>';}var _regex =  /%%([^;]+);([^;]+);([^;]+);([^;]+);([^;]+);/g;function _htmRpc(){return this.htm.replace(_regex,'<div style="overflow:hidden;position:absolute;background-color:'+'$1;left:$2px;top:$3px;width:$4px;height:$5px"></div>\n');}function _htmPrtRpc(){return this.htm.replace(_regex,'<div style="overflow:hidden;position:absolute;background-color:'+'$1;left:$2px;top:$3px;width:$4px;height:$5px;border-left:$4px solid $1"></div>\n');}function _mkLin(x1, y1, x2, y2){if(x1 > x2){var _x2 = x2;var _y2 = y2;x2 = x1;y2 = y1;x1 = _x2;y1 = _y2;}var dx = x2-x1, dy = Math.abs(y2-y1),x = x1, y = y1,yIncr = (y1 > y2)? -1 : 1;if(dx >= dy){var pr = dy<<1,pru = pr - (dx<<1),p = pr-dx,ox = x;while(dx > 0){--dx;++x;if(p > 0){this._mkDiv(ox, y, x-ox, 1);y += yIncr;p += pru;ox = x;}else p += pr;}this._mkDiv(ox, y, x2-ox+1, 1);}else{var pr = dx<<1,pru = pr - (dy<<1),p = pr-dy,oy = y;if(y2 <= y1){while(dy > 0){--dy;if(p > 0){this._mkDiv(x++, y, 1, oy-y+1);y += yIncr;p += pru;oy = y;}else{y += yIncr;p += pr;}}this._mkDiv(x2, y2, 1, oy-y2+1);}else{while(dy > 0){--dy;y += yIncr;if(p > 0){this._mkDiv(x++, oy, 1, y-oy);p += pru;oy = y;}else p += pr;}this._mkDiv(x2, oy, 1, y2-oy+1);}}}function _mkLin2D(x1, y1, x2, y2){if(x1 > x2){var _x2 = x2;var _y2 = y2;x2 = x1;y2 = y1;x1 = _x2;y1 = _y2;}var dx = x2-x1, dy = Math.abs(y2-y1),x = x1, y = y1,yIncr = (y1 > y2)? -1 : 1;var s = this.stroke;if(dx >= dy){if(dx > 0 && s-3 > 0){var _s = (s*dx*Math.sqrt(1+dy*dy/(dx*dx))-dx-(s>>1)*dy) / dx;_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;}else var _s = s;var ad = Math.ceil(s/2);var pr = dy<<1,pru = pr - (dx<<1),p = pr-dx,ox = x;while(dx > 0){--dx;++x;if(p > 0){this._mkDiv(ox, y, x-ox+ad, _s);y += yIncr;p += pru;ox = x;}else p += pr;}this._mkDiv(ox, y, x2-ox+ad+1, _s);}else{if(s-3 > 0){var _s = (s*dy*Math.sqrt(1+dx*dx/(dy*dy))-(s>>1)*dx-dy) / dy;_s = (!(s-4)? Math.ceil(_s) : Math.round(_s)) + 1;}else var _s = s;var ad = Math.round(s/2);var pr = dx<<1,pru = pr - (dy<<1),p = pr-dy,oy = y;if(y2 <= y1){++ad;while(dy > 0){--dy;if(p > 0){this._mkDiv(x++, y, _s, oy-y+ad);y += yIncr;p += pru;oy = y;}else{y += yIncr;p += pr;}}this._mkDiv(x2, y2, _s, oy-y2+ad);}else{while(dy > 0){--dy;y += yIncr;if(p > 0){this._mkDiv(x++, oy, _s, y-oy+ad);p += pru;oy = y;}else p += pr;}this._mkDiv(x2, oy, _s, y2-oy+ad+1);}}}function _mkLinDott(x1, y1, x2, y2){if(x1 > x2){var _x2 = x2;var _y2 = y2;x2 = x1;y2 = y1;x1 = _x2;y1 = _y2;}var dx = x2-x1, dy = Math.abs(y2-y1),x = x1, y = y1,yIncr = (y1 > y2)? -1 : 1,drw = true;if(dx >= dy){var pr = dy<<1,pru = pr - (dx<<1),p = pr-dx;while(dx > 0){--dx;if(drw) this._mkDiv(x, y, 1, 1);drw = !drw;if(p > 0){y += yIncr;p += pru;}else p += pr;++x;}}else{var pr = dx<<1,pru = pr - (dy<<1),p = pr-dy;while(dy > 0){--dy;if(drw) this._mkDiv(x, y, 1, 1);drw = !drw;y += yIncr;if(p > 0){++x;p += pru;}else p += pr;}}if(drw) this._mkDiv(x, y, 1, 1);}function _mkOv(left, top, width, height){var a = (++width)>>1, b = (++height)>>1,wod = width&1, hod = height&1,cx = left+a, cy = top+b,x = 0, y = b,ox = 0, oy = b,aa2 = (a*a)<<1, aa4 = aa2<<1, bb2 = (b*b)<<1, bb4 = bb2<<1,st = (aa2>>1)*(1-(b<<1)) + bb2,tt = (bb2>>1) - aa2*((b<<1)-1),w, h;while(y > 0){if(st < 0){st += bb2*((x<<1)+3);tt += bb4*(++x);}else if(tt < 0){st += bb2*((x<<1)+3) - aa4*(y-1);tt += bb4*(++x) - aa2*(((y--)<<1)-3);w = x-ox;h = oy-y;if((w&2) && (h&2)){this._mkOvQds(cx, cy, x-2, y+2, 1, 1, wod, hod);this._mkOvQds(cx, cy, x-1, y+1, 1, 1, wod, hod);}else this._mkOvQds(cx, cy, x-1, oy, w, h, wod, hod);ox = x;oy = y;}else{tt -= aa2*((y<<1)-3);st -= aa4*(--y);}}w = a-ox+1;h = (oy<<1)+hod;y = cy-oy;this._mkDiv(cx-a, y, w, h);this._mkDiv(cx+ox+wod-1, y, w, h);}function _mkOv2D(left, top, width, height){var s = this.stroke;width += s+1;height += s+1;var a = width>>1, b = height>>1,wod = width&1, hod = height&1,cx = left+a, cy = top+b,x = 0, y = b,aa2 = (a*a)<<1, aa4 = aa2<<1, bb2 = (b*b)<<1, bb4 = bb2<<1,st = (aa2>>1)*(1-(b<<1)) + bb2,tt = (bb2>>1) - aa2*((b<<1)-1);if(s-4 < 0 && (!(s-2) || width-51 > 0 && height-51 > 0)){var ox = 0, oy = b,w, h,pxw;while(y > 0){if(st < 0){st += bb2*((x<<1)+3);tt += bb4*(++x);}else if(tt < 0){st += bb2*((x<<1)+3) - aa4*(y-1);tt += bb4*(++x) - aa2*(((y--)<<1)-3);w = x-ox;h = oy-y;if(w-1){pxw = w+1+(s&1);h = s;}else if(h-1){pxw = s;h += 1+(s&1);}else pxw = h = s;this._mkOvQds(cx, cy, x-1, oy, pxw, h, wod, hod);ox = x;oy = y;}else{tt -= aa2*((y<<1)-3);st -= aa4*(--y);}}this._mkDiv(cx-a, cy-oy, s, (oy<<1)+hod);this._mkDiv(cx+a+wod-s, cy-oy, s, (oy<<1)+hod);}else{var _a = (width-(s<<1))>>1,_b = (height-(s<<1))>>1,_x = 0, _y = _b,_aa2 = (_a*_a)<<1, _aa4 = _aa2<<1, _bb2 = (_b*_b)<<1, _bb4 = _bb2<<1,_st = (_aa2>>1)*(1-(_b<<1)) + _bb2,_tt = (_bb2>>1) - _aa2*((_b<<1)-1),pxl = new Array(),pxt = new Array(),_pxb = new Array();pxl[0] = 0;pxt[0] = b;_pxb[0] = _b-1;while(y > 0){if(st < 0){pxl[pxl.length] = x;pxt[pxt.length] = y;st += bb2*((x<<1)+3);tt += bb4*(++x);}else if(tt < 0){pxl[pxl.length] = x;st += bb2*((x<<1)+3) - aa4*(y-1);tt += bb4*(++x) - aa2*(((y--)<<1)-3);pxt[pxt.length] = y;}else{tt -= aa2*((y<<1)-3);st -= aa4*(--y);}if(_y > 0){if(_st < 0){_st += _bb2*((_x<<1)+3);_tt += _bb4*(++_x);_pxb[_pxb.length] = _y-1;}else if(_tt < 0){_st += _bb2*((_x<<1)+3) - _aa4*(_y-1);_tt += _bb4*(++_x) - _aa2*(((_y--)<<1)-3);_pxb[_pxb.length] = _y-1;}else{_tt -= _aa2*((_y<<1)-3);_st -= _aa4*(--_y);_pxb[_pxb.length-1]--;}}}var ox = -wod, oy = b,_oy = _pxb[0],l = pxl.length,w, h;for(var i = 0; i < l; i++){if(typeof _pxb[i] != "undefined"){if(_pxb[i] < _oy || pxt[i] < oy){x = pxl[i];this._mkOvQds(cx, cy, x, oy, x-ox, oy-_oy, wod, hod);ox = x;oy = pxt[i];_oy = _pxb[i];}}else{x = pxl[i];this._mkDiv(cx-x, cy-oy, 1, (oy<<1)+hod);this._mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);ox = x;oy = pxt[i];}}this._mkDiv(cx-a, cy-oy, 1, (oy<<1)+hod);this._mkDiv(cx+ox+wod, cy-oy, 1, (oy<<1)+hod);}}function _mkOvDott(left, top, width, height){var a = (++width)>>1, b = (++height)>>1,wod = width&1, hod = height&1, hodu = hod^1,cx = left+a, cy = top+b,x = 0, y = b,aa2 = (a*a)<<1, aa4 = aa2<<1, bb2 = (b*b)<<1, bb4 = bb2<<1,st = (aa2>>1)*(1-(b<<1)) + bb2,tt = (bb2>>1) - aa2*((b<<1)-1),drw = true;while(y > 0){if(st < 0){st += bb2*((x<<1)+3);tt += bb4*(++x);}else if(tt < 0){st += bb2*((x<<1)+3) - aa4*(y-1);tt += bb4*(++x) - aa2*(((y--)<<1)-3);}else{tt -= aa2*((y<<1)-3);st -= aa4*(--y);}if(drw && y >= hodu) this._mkOvQds(cx, cy, x, y, 1, 1, wod, hod);drw = !drw;}}function _mkRect(x, y, w, h){var s = this.stroke;this._mkDiv(x, y, w, s);this._mkDiv(x+w, y, s, h);this._mkDiv(x, y+h, w+s, s);this._mkDiv(x, y+s, s, h-s);}function _mkRectDott(x, y, w, h){this.drawLine(x, y, x+w, y);this.drawLine(x+w, y, x+w, y+h);this.drawLine(x, y+h, x+w, y+h);this.drawLine(x, y, x, y+h);}function jsgFont(){this.PLAIN = 'font-weight:normal;';this.BOLD = 'font-weight:bold;';this.ITALIC = 'font-style:italic;';this.ITALIC_BOLD = this.ITALIC + this.BOLD;this.BOLD_ITALIC = this.ITALIC_BOLD;}var Font = new jsgFont();function jsgStroke(){this.DOTTED = -1;}var Stroke = new jsgStroke();function jsGraphics(cnv, wnd){this.setColor = function(x){this.color = x.toLowerCase();};this.setStroke = function(x){this.stroke = x;if(!(x+1)){this.drawLine = _mkLinDott;this._mkOv = _mkOvDott;this.drawRect = _mkRectDott;}else if(x-1 > 0){this.drawLine = _mkLin2D;this._mkOv = _mkOv2D;this.drawRect = _mkRect;}else{this.drawLine = _mkLin;this._mkOv = _mkOv;this.drawRect = _mkRect;}};this.setPrintable = function(arg){this.printable = arg;if(jg_fast){this._mkDiv = _mkDivIe;this._htmRpc = arg? _htmPrtRpc : _htmRpc;}else this._mkDiv = arg? _mkDivPrt : _mkDiv;};this.setFont = function(fam, sz, sty){this.ftFam = fam;this.ftSz = sz;this.ftSty = sty || Font.PLAIN;};this.drawPolyline = this.drawPolyLine = function(x, y){for (var i=x.length - 1; i;){--i;this.drawLine(x[i], y[i], x[i+1], y[i+1]);}};this.fillRect = function(x, y, w, h){this._mkDiv(x, y, w, h);};this.drawPolygon = function(x, y){this.drawPolyline(x, y);this.drawLine(x[x.length-1], y[x.length-1], x[0], y[0]);};this.drawEllipse = this.drawOval = function(x, y, w, h){this._mkOv(x, y, w, h);};this.fillEllipse = this.fillOval = function(left, top, w, h){var a = w>>1, b = h>>1,wod = w&1, hod = h&1,cx = left+a, cy = top+b,x = 0, y = b, oy = b,aa2 = (a*a)<<1, aa4 = aa2<<1, bb2 = (b*b)<<1, bb4 = bb2<<1,st = (aa2>>1)*(1-(b<<1)) + bb2,tt = (bb2>>1) - aa2*((b<<1)-1),xl, dw, dh;if(w) while(y > 0){if(st < 0){st += bb2*((x<<1)+3);tt += bb4*(++x);}else if(tt < 0){st += bb2*((x<<1)+3) - aa4*(y-1);xl = cx-x;dw = (x<<1)+wod;tt += bb4*(++x) - aa2*(((y--)<<1)-3);dh = oy-y;this._mkDiv(xl, cy-oy, dw, dh);this._mkDiv(xl, cy+y+hod, dw, dh);oy = y;}else{tt -= aa2*((y<<1)-3);st -= aa4*(--y);}}this._mkDiv(cx-a, cy-oy, w, (oy<<1)+hod);};this.fillArc = function(iL, iT, iW, iH, fAngA, fAngZ){var a = iW>>1, b = iH>>1,iOdds = (iW&1) | ((iH&1) << 16),cx = iL+a, cy = iT+b,x = 0, y = b, ox = x, oy = y,aa2 = (a*a)<<1, aa4 = aa2<<1, bb2 = (b*b)<<1, bb4 = bb2<<1,st = (aa2>>1)*(1-(b<<1)) + bb2,tt = (bb2>>1) - aa2*((b<<1)-1),// Vars for radial boundary linesxEndA, yEndA, xEndZ, yEndZ,iSects = (1 << (Math.floor((fAngA %= 360.0)/180.0) << 3))| (2 << (Math.floor((fAngZ %= 360.0)/180.0) << 3))| ((fAngA >= fAngZ) << 16),aBndA = new Array(b+1), aBndZ = new Array(b+1);// Set up radial boundary linesfAngA *= Math.PI/180.0;fAngZ *= Math.PI/180.0;xEndA = cx+Math.round(a*Math.cos(fAngA));yEndA = cy+Math.round(-b*Math.sin(fAngA));_mkLinVirt(aBndA, cx, cy, xEndA, yEndA);xEndZ = cx+Math.round(a*Math.cos(fAngZ));yEndZ = cy+Math.round(-b*Math.sin(fAngZ));_mkLinVirt(aBndZ, cx, cy, xEndZ, yEndZ);while(y > 0){if(st < 0) // Advance x{st += bb2*((x<<1)+3);tt += bb4*(++x);}else if(tt < 0) // Advance x and y{st += bb2*((x<<1)+3) - aa4*(y-1);ox = x;tt += bb4*(++x) - aa2*(((y--)<<1)-3);this._mkArcDiv(ox, y, oy, cx, cy, iOdds, aBndA, aBndZ, iSects);oy = y;}else // Advance y{tt -= aa2*((y<<1)-3);st -= aa4*(--y);if(y && (aBndA[y] != aBndA[y-1] || aBndZ[y] != aBndZ[y-1])){this._mkArcDiv(x, y, oy, cx, cy, iOdds, aBndA, aBndZ, iSects);ox = x;oy = y;}}}this._mkArcDiv(x, 0, oy, cx, cy, iOdds, aBndA, aBndZ, iSects);if(iOdds >> 16) // Odd height{if(iSects >> 16) // Start-angle > end-angle{var xl = (yEndA <= cy || yEndZ > cy)? (cx - x) : cx;this._mkDiv(xl, cy, x + cx - xl + (iOdds & 0xffff), 1);}else if((iSects & 0x01) && yEndZ > cy)this._mkDiv(cx - x, cy, x, 1);}};/* fillPolygon method, implemented by Matthieu Haller.This javascript function is an adaptation of the gdImageFilledPolygon for Walter Zorn lib.C source of GD 1.8.4 found at http://www.boutell.com/gd/THANKS to Kirsten Schulz for the polygon fixes!The intersection finding technique of this code could be improvedby remembering the previous intertersection, and by using the slope.That could help to adjust intersections to produce a niceinterior_extrema. */this.fillPolygon = function(array_x, array_y){var i;var y;var miny, maxy;var x1, y1;var x2, y2;var ind1, ind2;var ints;var n = array_x.length;if(!n) return;miny = array_y[0];maxy = array_y[0];for(i = 1; i < n; i++){if(array_y[i] < miny)miny = array_y[i];if(array_y[i] > maxy)maxy = array_y[i];}for(y = miny; y <= maxy; y++){var polyInts = new Array();ints = 0;for(i = 0; i < n; i++){if(!i){ind1 = n-1;ind2 = 0;}else{ind1 = i-1;ind2 = i;}y1 = array_y[ind1];y2 = array_y[ind2];if(y1 < y2){x1 = array_x[ind1];x2 = array_x[ind2];}else if(y1 > y2){y2 = array_y[ind1];y1 = array_y[ind2];x2 = array_x[ind1];x1 = array_x[ind2];}else continue; //  Modified 11. 2. 2004 Walter Zornif((y >= y1) && (y < y2))polyInts[ints++] = Math.round((y-y1) * (x2-x1) / (y2-y1) + x1);else if((y == maxy) && (y > y1) && (y <= y2))polyInts[ints++] = Math.round((y-y1) * (x2-x1) / (y2-y1) + x1);}polyInts.sort(_CompInt);for(i = 0; i < ints; i+=2)this._mkDiv(polyInts[i], y, polyInts[i+1]-polyInts[i]+1, 1);}};this.drawString = function(txt, x, y){this.htm += '<div style="position:absolute;white-space:nowrap;'+'left:' + x + 'px;'+'top:' + y + 'px;'+'font-family:' +  this.ftFam + ';'+'font-size:' + this.ftSz + ';'+'color:' + this.color + ';' + this.ftSty + '">'+txt +'<\/div>';};/* drawStringRect() added by Rick Blommers.Allows to specify the size of the text rectangle and to align thetext both horizontally (e.g. right) and vertically within that rectangle */this.drawStringRect = function(txt, x, y, width, halign){this.htm += '<div style="position:absolute;overflow:hidden;'+'left:' + x + 'px;'+'top:' + y + 'px;'+'width:'+width +'px;'+'text-align:'+halign+';'+'font-family:' +  this.ftFam + ';'+'font-size:' + this.ftSz + ';'+'color:' + this.color + ';' + this.ftSty + '">'+txt +'<\/div>';};this.drawImage = function(imgSrc, x, y, w, h, a){this.htm += '<div style="position:absolute;'+'left:' + x + 'px;'+'top:' + y + 'px;'+// w (width) and h (height) arguments are now optional.// Added by Mahmut Keygubatli, 14.1.2008(w? ('width:' +  w + 'px;') : '') +(h? ('height:' + h + 'px;'):'')+'">'+'<img src="' + imgSrc +'"'+ (w ? (' width="' + w + '"'):'')+ (h ? (' height="' + h + '"'):'') + (a? (' '+a) : '') + '>'+'<\/div>';};this.clear = function(){this.htm = "";if(this.cnv) this.cnv.innerHTML = "";};this._mkOvQds = function(cx, cy, x, y, w, h, wod, hod){var xl = cx - x, xr = cx + x + wod - w, yt = cy - y, yb = cy + y + hod - h;if(xr > xl+w){this._mkDiv(xr, yt, w, h);this._mkDiv(xr, yb, w, h);}elsew = xr - xl + w;this._mkDiv(xl, yt, w, h);this._mkDiv(xl, yb, w, h);};this._mkArcDiv = function(x, y, oy, cx, cy, iOdds, aBndA, aBndZ, iSects){var xrDef = cx + x + (iOdds & 0xffff), y2, h = oy - y, xl, xr, w;if(!h) h = 1;x = cx - x;if(iSects & 0xff0000) // Start-angle > end-angle{y2 = cy - y - h;if(iSects & 0x00ff){if(iSects & 0x02){xl = Math.max(x, aBndZ[y]);w = xrDef - xl;if(w > 0) this._mkDiv(xl, y2, w, h);}if(iSects & 0x01){xr = Math.min(xrDef, aBndA[y]);w = xr - x;if(w > 0) this._mkDiv(x, y2, w, h);}}elsethis._mkDiv(x, y2, xrDef - x, h);y2 = cy + y + (iOdds >> 16);if(iSects & 0xff00){if(iSects & 0x0100){xl = Math.max(x, aBndA[y]);w = xrDef - xl;if(w > 0) this._mkDiv(xl, y2, w, h);}if(iSects & 0x0200){xr = Math.min(xrDef, aBndZ[y]);w = xr - x;if(w > 0) this._mkDiv(x, y2, w, h);}}elsethis._mkDiv(x, y2, xrDef - x, h);}else{if(iSects & 0x00ff){if(iSects & 0x02)xl = Math.max(x, aBndZ[y]);elsexl = x;if(iSects & 0x01)xr = Math.min(xrDef, aBndA[y]);elsexr = xrDef;y2 = cy - y - h;w = xr - xl;if(w > 0) this._mkDiv(xl, y2, w, h);}if(iSects & 0xff00){if(iSects & 0x0100)xl = Math.max(x, aBndA[y]);elsexl = x;if(iSects & 0x0200)xr = Math.min(xrDef, aBndZ[y]);elsexr = xrDef;y2 = cy + y + (iOdds >> 16);w = xr - xl;if(w > 0) this._mkDiv(xl, y2, w, h);}}};this.setStroke(1);this.setFont("verdana,geneva,helvetica,sans-serif", "12px", Font.PLAIN);this.color = "#000000";this.htm = "";this.wnd = wnd || window;if(!jg_ok) _chkDHTM(this.wnd);if(jg_ok){if(cnv){if(typeof(cnv) == "string")this.cont = document.all? (this.wnd.document.all[cnv] || null): document.getElementById? (this.wnd.document.getElementById(cnv) || null): null;else if(cnv == window.document)this.cont = document.getElementsByTagName("body")[0];// If cnv is a direct reference to a canvas DOM node// (option suggested by Andreas Luleich)else this.cont = cnv;// Create new canvas inside container DIV. Thus the drawing and clearing// methods won't interfere with the container's inner html.// Solution suggested by Vladimir.this.cnv = this.wnd.document.createElement("div");this.cnv.style.fontSize=0;this.cont.appendChild(this.cnv);this.paint = jg_dom? _pntCnvDom : _pntCnvIe;}elsethis.paint = _pntDoc;}elsethis.paint = _pntN;this.setPrintable(false);}function _mkLinVirt(aLin, x1, y1, x2, y2){var dx = Math.abs(x2-x1), dy = Math.abs(y2-y1),x = x1, y = y1,xIncr = (x1 > x2)? -1 : 1,yIncr = (y1 > y2)? -1 : 1,p,i = 0;if(dx >= dy){var pr = dy<<1,pru = pr - (dx<<1);p = pr-dx;while(dx > 0){--dx;if(p > 0)    //  Increment y{aLin[i++] = x;y += yIncr;p += pru;}else p += pr;x += xIncr;}}else{var pr = dx<<1,pru = pr - (dy<<1);p = pr-dy;while(dy > 0){--dy;y += yIncr;aLin[i++] = x;if(p > 0)    //  Increment x{x += xIncr;p += pru;}else p += pr;}}for(var len = aLin.length, i = len-i; i;)aLin[len-(i--)] = x;};function _CompInt(x, y){return(x - y);}

2、页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title>JavaScript图形库可在网页上动态绘制圆、椭圆、斜线、折线、多边形（包括三角形、矩形）。底层通过创建大量1px*1px的DIV实现，同时对于连续的像素进行了优化，尽量地减少所需的DIV，因此有较好的性能，当然和Java2D、GDI+、OpenGL、DirectX、Flash、SVG、VML及HTML Canvas是无法相比较的。</title>    <script language="javascript" src="js/wz_jsgraphics.js" type="text/javascript"></script></head><body>    <form id="form1" runat="server">    <div>    <input id="butdraw" value="draw" type="button" onclick="butdraw_click();" /><div id="test" style="color:blue; left: 0px; overflow: visible; width: 400px; position: relative; top: 0px; height: 250px;background:#eeeeee; "></div><script type="text/javascript">    var jg = new jsGraphics("test"); //创建div画布对象    function butdraw_click() {        if (window.event) event.cancelbubble = true; //如果页面有事件，阻止事件冒泡 event.cancelBubble=true(如果子元素触发了单击事件，不会触发父元素的单击事件)        jg.setColor("#ff00ff"); //设置画笔颜色        jg.setStroke(1); //设置画笔宽度        jg.setPrintable(false); //不可打印        jg.drawLine(10, 10, 100, 100); //画线drawLine(坐标x1, 坐标y1, 坐标x2, 坐标y2);        var xpoints = new Array(10, 85, 93, 60);        var ypoints = new Array(50, 10, 105, 87);        jg.drawPolyLine(xpoints, ypoints); //画折线   drawPolyLine(xpoints, ypoints);         jg.setStroke(3);         jg.drawRect(20, 50, 70, 140); //画框 drawRect(x, y, width, height);         jg.setColor("blue");         jg.fillRect(24, 54, 65, 135); //填充区域   fillRect(x, y, width, height);        var xpoints = new Array(10, 85, 33, 20);        var ypoints = new Array(50, 30, 105, 87);        jg.drawPolygon(xpoints, ypoints); //画任意多边形（封闭折线）   drawPolygon(xpoints, ypoints);        jg.fillPolygon(new Array(20, 85, 93, 40), new Array(50, 50, 15, 87)); //填充任意多边形   fillPolygon(xpoints, ypoints);        jg.drawEllipse(20, 50, 70, 140);//画椭圆     drawEllipse(x, y, width, height);        jg.drawOval(20, 50, 70, 70); //要画圆        jg.fillEllipse(20, 50, 71, 141);//填充椭圆    fillEllipse(x, y, width, height);        jg.fillOval(20, 50, 71, 141);//填充椭圆        jg.fillArc(20, 20, 40, 40, 220.0, 270.0); //画弧     fillArc(x, y, width, height, start-angle, end-angle);        //总是从前面的角度顺时针转到后面的角度，即使前面的角度大于后面的角度        jg.setFont("arial", "15px", Font.ITALIC_BOLD);//设置字体    setFont("font-family", "size+unit", style);        jg.setFont("arial", "15px", Font.PLAIN);        jg.drawString("some text", 20, 50); //固定区域输出文字    drawStringRect("text", x, y, width, alignment);        jg.drawRect(20, 50, 300, 140);        jg.setFont("verdana", "11px", Font.BOLD);        jg.drawStringRect("text", 20, 50, 300, "right");        jg.drawImage("but04.gif", 20, 50);//输出图像文件    drawImage("src", x, y, width, height);        jg.paint();        //jg.clear();    }</script>    </div>    </form></body></html>

 

                var jg = new jsGraphics("canvas");

                jg.setColor("silver");
                jg.fillRect(0, 250, 800, 20); //填充区域   fillRect(x, y, width, height);

 

                jg.setColor("black");
                jg.setFont("宋体", "12px", Font.PLAIN);
                jg.drawString("测试文本", 0, 250); //固定区域输出文字 drawStringRect("text", x, y, width, alignment);

 

                jg.setStroke(Stroke.DOTTED);
                jg.drawLine(20, 0, 20, 500); //画线drawLine(坐标x1, 坐标y1, 坐标x2, 坐标y2);

 

                jg.drawStringRect("<img src='pylon2.jpg' style='width:30px;height:70px' onClick='alert(0);'></img>", 0, 0, 30, "left"); //jg.drawStringRect("html", x, y, width, alignment);
                jg.paint();