JS画板
来源：互联网 发布：大专网络教育 编辑：程序博客网 时间：2024/04/29 12:57
收藏http://www.ajaxbbs.net/test/wz_jsgraphics/index.htm
确实很强大
下来研究研究
JS
/* This notice must be untouched at all times.wz_jsgraphics.js v. 3.03The latest version is available athttp://www.walterzorn.comor http://www.devira.comor http://www.walterzorn.deCopyright (c) 2002-2004 Walter Zorn. All rights reserved.Created 3. 11. 2002 by Walter Zorn (Web: http://www.walterzorn.com )Last modified: 28. 1. 2008Performance 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(x, i){x = document.body || null;jg_ie = x && typeof x.insertAdjacentHTML != "undefined" && document.createElement;jg_dom = (x && !jg_ie &&typeof x.appendChild != "undefined" &&typeof document.createRange != "undefined" &&typeof (i = document.createRange()).setStartBefore != "undefined" &&typeof i.createContextualFragment != "undefined");jg_fast = jg_ie && document.all && !window.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:$2;top:$3;width:$4;height:$5"></div>\n');}function _htmPrtRpc(){return this.htm.replace(_regex,'<div style="overflow:hidden;position:absolute;background-color:'+'$1;left:$2;top:$3;width:$4;height:$5;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();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);}HTML 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD> <TITLE>JS画板</TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <SCRIPT LANGUAGE="JavaScript" src="wz_jsgraphics.js"> </SCRIPT> <SCRIPT LANGUAGE="JavaScript"> <!-- function drawObj(el) { el = this.el = document.getElementById(el); this.gc = new jsGraphics(el); o = this; this.cacheTime = []; this.cacheAction = []; el.onmousedown = function() { o.draw = true; } document.onmouseup = function() { o.draw = false; o.start = null; } el.onmousemove = function(e) { e = window.event || e; if (!o.draw) return; if (o.start) { o.end = [e.x || e.pageX, e.y || e.pageY]; o.gc.drawLine.apply(o.gc, o.start.concat(o.end)); o.gc.paint(); o.cacheAction.push("o.gc.drawLine.apply(o.gc,[" + o.start.concat(o.end) + "]);o.gc.paint();");o.cacheTime.push(+new Date); o.start = o.end; return; } o.start = [e.x || e.pageX, e.y || e.pageY];o.cacheTime.push(+new Date); } } drawObj.prototype = { setColor: function(c) { this.gc.setColor(c); this.cacheAction.push("o.gc.setColor('" + c + "');");o.cacheTime.push(+new Date); }, setStroke: function(c) { this.gc.setStroke(c); this.cacheAction.push("o.gc.setStroke('" + c + "');");o.cacheTime.push(+new Date); }, clear: function(c) { this.gc.clear(); ! c && (this.cacheAction.length = 0); }, getCode: function() { //return this.lastHTML = this.el.innerHTML; return this.cacheAction.join(''); }, runCode: function(s) { s = s.split(';'); this.repaint(s); }, repaint: function(s) {this.gc.setColor('#000000');this.gc.setStroke(1); var c = ["o.setColor('" + this.gc.color + "');o.setStroke('" + this.gc.stroke + "');"]; this.clear(true); var s1 = (s || this.cacheAction).concat(c); if (s1.length) { var o = this,i = 0,l = s1.length; (function() { if (i == l) return; window.eval(s1[i++]); setTimeout(arguments.callee, o.cacheTime[i]-o.cacheTime[i-1]); })(); } } } var dd; window.onload = function() { dd = new drawObj('test'); document.forms[0].reset(); intocolor(); document.body.onclick = OnDocumentClick; } //----------颜色面板-------------------------------- var ColorHex = new Array('00', '33', '66', '99', 'CC', 'FF'); var SpColorHex = new Array('FF0000', '00FF00', '0000FF', 'FFFF00', '00FFFF', 'FF00FF'); var current = null; function intocolor() { var colorTable = '' for (i = 0; i < 2; i++) { for (j = 0; j < 6; j++) { colorTable = colorTable + '<tr height=12>'; colorTable = colorTable + '<td width=11 style="background-color:#000000">' if (i == 0) { colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[j] + ColorHex[j] + ColorHex[j] + '">' } else { colorTable = colorTable + '<td width=11 style="background-color:#' + SpColorHex[j] + '">' } colorTable = colorTable + '<td width=11 style="background-color:#000000">' for (k = 0; k < 3; k++) { for (l = 0; l < 6; l++) { colorTable = colorTable + '<td width=11 style="background-color:#' + ColorHex[k + i * 3] + ColorHex[l] + ColorHex[j] + '">' } } } } colorTable = '<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">' + '<tr height=30><td colspan=21 bgcolor=#cccccc>' + '<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">' + '<tr><td width="3"><td><input type="text" id="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>' + '<td width="3"><td><input type="text" id="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td></tr></table></td></table>' + '<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver(event)" onmouseout="doOut()" onclick="doclick(event)" style="cursor:hand;">' + colorTable + '</table>'; document.getElementById('colorpanel').innerHTML = colorTable } //将颜色值字母大写 function doOver(e) { e = e || event; var src = e.target || e.srcElement; if ((src.tagName == "TD") && (current != src)) { if (current != null) { current.style.backgroundColor = current._background } src._background = src.style.backgroundColor; document.getElementById('DisColor').style.backgroundColor = src.style.backgroundColor; document.getElementById('HexColor').value = src.style.backgroundColor.toUpperCase(); src.style.backgroundColor = "white"; current = src } } //将颜色值字母大写 function doOut() { if (current != null) current.style.backgroundColor = current._background.toUpperCase(); } function doclick(e) { e = e || event; var src = e.target || e.srcElement; if (src.tagName == "TD") { var clr = src._background; clr = clr.toUpperCase(); //将颜色值大写 if (targetElement) { //给目标无件设置颜色值 targetElement.value = clr; dd.setColor(clr) } DisplayClrDlg(false); return clr; } } var targetElement = null; //接收颜色对话框返回值的元素 //当点下鼠标时，确定显示还是隐藏颜色对话框 //点击颜色对话框以外其它区域时，让对话框隐藏 //点击颜色对话框色区时，由 doclick 函数来隐藏对话框 function OnDocumentClick(e) { e = e || event; var srcElement = e.target || e.srcElement; if (srcElement.alt == "clrDlg") { //显示颜色对话框 targetElement = srcElement; DisplayClrDlg(e, true); } else { //是否是在颜色对话框上点击的 while (srcElement && srcElement.id != "colorpanel") { srcElement = srcElement.parentElement; } if (!srcElement) { //不是在颜色对话框上点击的 DisplayClrDlg(e, false); } } } //显示颜色对话框 //display 决定显示还是隐藏 //自动确定显示位置 function DisplayClrDlg(e, display) { var clrPanel = document.getElementById("colorpanel"); if (display) { var left = document.body.scrollLeft + e.clientX; var top = document.body.scrollTop + e.clientY; if (e.clientX + clrPanel.style.width > document.body.clientWidth) { //对话框显示在鼠标右方时，会出现遮挡，将其显示在鼠标左方 left -= clrPanel.style.width; } if (e.clientY + clrPanel.style.height > document.body.clientHeight) { //对话框显示在鼠标下方时，会出现遮挡，将其显示在鼠标上方 top -= clrPanel.style.height; } clrPanel.style.left = left; clrPanel.style.top = top; clrPanel.style.display = "block"; } else { clrPanel.style.display = "none"; } } //--> </SCRIPT> <STYLE TYPE="text/css"> *{margin:0;padding:0} body{padding:5px} </STYLE> </HEAD> <BODY> <h1 style='text-align:center'> JS画板 <span style='color:#999;font-size:14px'> By 网者归来 </span> </h1> <form> <div style='border:1px dotted #666;background:#eee;margin:5px 0;padding:5px'> 画笔颜色： <input type="input" alt="clrDlg" value='#000000' /> 画笔宽度： <select onchange="dd.setStroke(parseInt(this.value));"> <option value="1" selected> 1px </option> <option value="3"> 3px </option> <option value="5"> 5px </option> <option value="7"> 7px </option> <option value="9"> 9px </option> </select> <input type="button" value="清除画板内容" onclick="dd.clear();" /> <input type="button" value="重现绘画过程" onclick="dd.repaint();" /> <input type="button" value="获取绘图过程代码" onclick="document.getElementById('test1').value=dd.getCode();" /> <input type="button" value="执行测试代码" onclick="dd.runCode(document.getElementById('testcode').value);" /> </div> <div style="border:5px solid #666"> <div id='test' style='width:100%;height:300px;'> </div> </div> <textarea id='test1' style='width:100%;height:150px;margin-top:5px'> </textarea> <input type="button" value="执行绘图过程代码" onclick="dd.runCode(document.getElementById('test1').value);" /> </form> <div id="colorpanel" style="position:absolute;display:none;width:253px;height:177px;"> </div> <textarea id='testcode' style='display:none'> o.gc.setColor('#000000');o.gc.setStroke(1);o.gc.setStroke('3');o.gc.setColor('#FF0000');o.gc.drawLine.apply(o.gc,[249,190,250,190]);o.gc.paint();o.gc.drawLine.apply(o.gc,[250,190,252,192]);o.gc.paint();o.gc.drawLine.apply(o.gc,[252,192,253,193]);o.gc.paint();o.gc.drawLine.apply(o.gc,[253,193,253,194]);o.gc.paint();o.gc.drawLine.apply(o.gc,[253,194,255,197]);o.gc.paint();o.gc.drawLine.apply(o.gc,[255,197,257,199]);o.gc.paint();o.gc.drawLine.apply(o.gc,[257,199,258,200]);o.gc.paint();o.gc.drawLine.apply(o.gc,[258,200,260,204]);o.gc.paint();o.gc.drawLine.apply(o.gc,[260,204,261,204]);o.gc.paint();o.gc.drawLine.apply(o.gc,[261,204,262,206]);o.gc.paint();o.gc.drawLine.apply(o.gc,[262,206,263,208]);o.gc.paint();o.gc.drawLine.apply(o.gc,[263,208,263,209]);o.gc.paint();o.gc.drawLine.apply(o.gc,[263,209,263,210]);o.gc.paint();o.gc.drawLine.apply(o.gc,[263,210,264,211]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,211,263,211]);o.gc.paint();o.gc.drawLine.apply(o.gc,[253,233,255,235]);o.gc.paint();o.gc.drawLine.apply(o.gc,[255,235,256,237]);o.gc.paint();o.gc.drawLine.apply(o.gc,[256,237,260,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[260,241,261,242]);o.gc.paint();o.gc.drawLine.apply(o.gc,[261,242,262,244]);o.gc.paint();o.gc.drawLine.apply(o.gc,[262,244,262,245]);o.gc.paint();o.gc.drawLine.apply(o.gc,[262,245,263,247]);o.gc.paint();o.gc.drawLine.apply(o.gc,[263,247,264,249]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,249,264,250]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,250,264,252]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,252,264,254]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,254,265,256]);o.gc.paint();o.gc.drawLine.apply(o.gc,[249,328,250,328]);o.gc.paint();o.gc.drawLine.apply(o.gc,[250,328,252,328]);o.gc.paint();o.gc.drawLine.apply(o.gc,[252,328,253,328]);o.gc.paint();o.gc.drawLine.apply(o.gc,[253,328,254,327]);o.gc.paint();o.gc.drawLine.apply(o.gc,[254,327,255,326]);o.gc.paint();o.gc.drawLine.apply(o.gc,[255,326,256,326]);o.gc.paint();o.gc.drawLine.apply(o.gc,[256,326,257,325]);o.gc.paint();o.gc.drawLine.apply(o.gc,[257,325,258,324]);o.gc.paint();o.gc.drawLine.apply(o.gc,[258,324,258,323]);o.gc.paint();o.gc.drawLine.apply(o.gc,[258,323,261,321]);o.gc.paint();o.gc.drawLine.apply(o.gc,[261,321,264,318]);o.gc.paint();o.gc.drawLine.apply(o.gc,[264,318,269,316]);o.gc.paint();o.gc.drawLine.apply(o.gc,[269,316,276,310]);o.gc.paint();o.gc.drawLine.apply(o.gc,[276,310,286,304]);o.gc.paint();o.gc.drawLine.apply(o.gc,[286,304,287,303]);o.gc.paint();o.gc.drawLine.apply(o.gc,[287,303,288,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[288,302,289,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[289,302,289,301]);o.gc.paint();o.gc.drawLine.apply(o.gc,[289,301,289,300]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,215,301,217]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,217,301,219]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,219,301,220]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,220,301,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,223,301,227]);o.gc.paint();o.gc.drawLine.apply(o.gc,[301,227,302,233]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,233,302,234]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,234,302,236]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,236,302,238]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,238,302,239]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,239,302,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,241,302,243]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,243,302,244]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,244,302,245]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,245,302,246]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,246,302,247]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,247,302,248]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,248,302,249]);o.gc.paint();o.gc.drawLine.apply(o.gc,[302,249,302,250]);o.gc.paint();o.gc.drawLine.apply(o.gc,[315,209,324,207]);o.gc.paint();o.gc.drawLine.apply(o.gc,[324,207,336,206]);o.gc.paint();o.gc.drawLine.apply(o.gc,[336,206,345,204]);o.gc.paint();o.gc.drawLine.apply(o.gc,[345,204,350,203]);o.gc.paint();o.gc.drawLine.apply(o.gc,[350,203,354,203]);o.gc.paint();o.gc.drawLine.apply(o.gc,[354,203,355,203]);o.gc.paint();o.gc.drawLine.apply(o.gc,[355,203,356,203]);o.gc.paint();o.gc.drawLine.apply(o.gc,[356,203,355,204]);o.gc.paint();o.gc.drawLine.apply(o.gc,[355,204,355,205]);o.gc.paint();o.gc.drawLine.apply(o.gc,[355,205,353,214]);o.gc.paint();o.gc.drawLine.apply(o.gc,[353,214,351,220]);o.gc.paint();o.gc.drawLine.apply(o.gc,[351,220,351,224]);o.gc.paint();o.gc.drawLine.apply(o.gc,[351,224,351,227]);o.gc.paint();o.gc.drawLine.apply(o.gc,[351,227,349,235]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,235,349,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,241,349,242]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,242,349,245]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,245,349,249]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,249,349,252]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,252,349,255]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,255,349,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,258,349,260]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,260,349,261]);o.gc.paint();o.gc.drawLine.apply(o.gc,[349,261,348,260]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,242,334,244]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,244,334,246]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,246,334,249]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,249,334,251]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,251,334,255]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,255,334,257]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,257,334,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,258,334,259]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,259,334,260]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,260,334,261]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,261,333,263]);o.gc.paint();o.gc.drawLine.apply(o.gc,[333,263,333,264]);o.gc.paint();o.gc.drawLine.apply(o.gc,[333,264,331,268]);o.gc.paint();o.gc.drawLine.apply(o.gc,[331,268,330,271]);o.gc.paint();o.gc.drawLine.apply(o.gc,[330,271,330,273]);o.gc.paint();o.gc.drawLine.apply(o.gc,[330,273,329,275]);o.gc.paint();o.gc.drawLine.apply(o.gc,[329,275,329,276]);o.gc.paint();o.gc.drawLine.apply(o.gc,[329,276,328,278]);o.gc.paint();o.gc.drawLine.apply(o.gc,[328,278,327,280]);o.gc.paint();o.gc.drawLine.apply(o.gc,[327,280,327,281]);o.gc.paint();o.gc.drawLine.apply(o.gc,[327,281,326,282]);o.gc.paint();o.gc.drawLine.apply(o.gc,[326,282,326,285]);o.gc.paint();o.gc.drawLine.apply(o.gc,[326,285,325,287]);o.gc.paint();o.gc.drawLine.apply(o.gc,[325,287,325,288]);o.gc.paint();o.gc.drawLine.apply(o.gc,[325,288,324,289]);o.gc.paint();o.gc.drawLine.apply(o.gc,[324,289,323,291]);o.gc.paint();o.gc.drawLine.apply(o.gc,[323,291,322,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[322,292,322,293]);o.gc.paint();o.gc.drawLine.apply(o.gc,[322,293,321,295]);o.gc.paint();o.gc.drawLine.apply(o.gc,[321,295,321,296]);o.gc.paint();o.gc.drawLine.apply(o.gc,[321,296,321,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[321,297,320,298]);o.gc.paint();o.gc.drawLine.apply(o.gc,[320,298,320,299]);o.gc.paint();o.gc.drawLine.apply(o.gc,[333,278,334,279]);o.gc.paint();o.gc.drawLine.apply(o.gc,[334,279,336,281]);o.gc.paint();o.gc.drawLine.apply(o.gc,[336,281,338,283]);o.gc.paint();o.gc.drawLine.apply(o.gc,[338,283,339,285]);o.gc.paint();o.gc.drawLine.apply(o.gc,[339,285,342,287]);o.gc.paint();o.gc.drawLine.apply(o.gc,[342,287,347,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[347,292,357,298]);o.gc.paint();o.gc.drawLine.apply(o.gc,[357,298,358,298]);o.gc.paint();o.gc.drawLine.apply(o.gc,[358,298,359,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,249,377,250]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,250,377,251]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,251,377,252]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,252,377,253]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,253,377,254]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,254,377,255]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,255,377,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,258,377,260]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,260,377,262]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,262,377,263]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,263,377,264]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,264,377,265]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,265,377,266]);o.gc.paint();o.gc.drawLine.apply(o.gc,[377,266,377,267]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,207,398,208]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,208,398,210]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,210,398,211]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,211,398,216]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,216,398,220]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,220,398,224]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,224,398,226]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,226,398,228]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,228,398,232]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,232,398,234]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,234,398,237]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,237,398,240]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,240,398,247]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,247,398,250]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,250,398,254]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,254,399,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[399,258,399,260]);o.gc.paint();o.gc.drawLine.apply(o.gc,[399,260,399,262]);o.gc.paint();o.gc.drawLine.apply(o.gc,[399,262,399,265]);o.gc.paint();o.gc.drawLine.apply(o.gc,[399,265,400,268]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,268,400,272]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,272,400,274]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,274,400,278]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,278,400,280]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,280,400,282]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,282,400,284]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,284,400,287]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,287,400,291]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,291,400,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,292,400,294]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,294,400,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,297,400,298]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,298,400,300]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,300,400,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,302,400,305]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,305,400,307]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,307,400,308]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,308,400,311]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,311,400,313]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,313,400,314]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,314,400,316]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,316,400,317]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,317,400,319]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,319,400,320]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,320,400,321]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,321,400,322]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,322,400,323]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,323,400,324]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,324,400,325]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,325,400,326]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,326,400,327]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,327,400,328]);o.gc.paint();o.gc.drawLine.apply(o.gc,[400,328,399,329]);o.gc.paint();o.gc.drawLine.apply(o.gc,[399,329,398,328]);o.gc.paint();o.gc.drawLine.apply(o.gc,[398,328,397,327]);o.gc.paint();o.gc.drawLine.apply(o.gc,[397,327,396,326]);o.gc.paint();o.gc.drawLine.apply(o.gc,[396,326,395,324]);o.gc.paint();o.gc.drawLine.apply(o.gc,[395,324,393,323]);o.gc.paint();o.gc.drawLine.apply(o.gc,[393,323,392,322]);o.gc.paint();o.gc.drawLine.apply(o.gc,[392,322,391,321]);o.gc.paint();o.gc.drawLine.apply(o.gc,[391,321,390,320]);o.gc.paint();o.gc.drawLine.apply(o.gc,[390,320,390,319]);o.gc.paint();o.gc.drawLine.apply(o.gc,[390,319,389,319]);o.gc.paint();o.gc.drawLine.apply(o.gc,[389,319,388,317]);o.gc.paint();o.gc.drawLine.apply(o.gc,[388,317,387,317]);o.gc.paint();o.gc.drawLine.apply(o.gc,[387,317,386,316]);o.gc.paint();o.gc.drawLine.apply(o.gc,[494,195,496,197]);o.gc.paint();o.gc.drawLine.apply(o.gc,[496,197,497,198]);o.gc.paint();o.gc.drawLine.apply(o.gc,[497,198,498,201]);o.gc.paint();o.gc.drawLine.apply(o.gc,[498,201,506,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[503,237,504,237]);o.gc.paint();o.gc.drawLine.apply(o.gc,[504,237,505,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,302,505,303]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,303,505,304]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,304,505,305]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,305,505,306]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,306,505,307]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,307,505,308]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,308,505,309]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,309,505,310]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,310,505,311]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,311,505,313]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,313,505,314]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,314,505,313]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,313,505,312]);o.gc.paint();o.gc.drawLine.apply(o.gc,[505,312,506,310]);o.gc.paint();o.gc.drawLine.apply(o.gc,[506,310,507,309]);o.gc.paint();o.gc.drawLine.apply(o.gc,[507,309,511,307]);o.gc.paint();o.gc.drawLine.apply(o.gc,[511,307,517,304]);o.gc.paint();o.gc.drawLine.apply(o.gc,[517,304,518,304]);o.gc.paint();o.gc.drawLine.apply(o.gc,[518,304,521,303]);o.gc.paint();o.gc.drawLine.apply(o.gc,[521,303,522,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[522,302,523,301]);o.gc.paint();o.gc.drawLine.apply(o.gc,[523,301,525,300]);o.gc.paint();o.gc.drawLine.apply(o.gc,[525,300,524,299]);o.gc.paint();o.gc.drawLine.apply(o.gc,[501,240,502,240]);o.gc.paint();o.gc.drawLine.apply(o.gc,[502,240,501,240]);o.gc.paint();o.gc.drawLine.apply(o.gc,[501,240,499,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[499,241,496,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[496,241,494,241]);o.gc.paint();o.gc.drawLine.apply(o.gc,[494,241,492,242]);o.gc.paint();o.gc.drawLine.apply(o.gc,[492,242,491,242]);o.gc.paint();o.gc.drawLine.apply(o.gc,[491,242,489,242]);o.gc.paint();o.gc.drawLine.apply(o.gc,[489,242,486,243]);o.gc.paint();o.gc.drawLine.apply(o.gc,[531,227,532,227]);o.gc.paint();o.gc.drawLine.apply(o.gc,[532,227,536,227]);o.gc.paint();o.gc.drawLine.apply(o.gc,[536,227,542,226]);o.gc.paint();o.gc.drawLine.apply(o.gc,[542,226,549,224]);o.gc.paint();o.gc.drawLine.apply(o.gc,[549,224,553,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[553,223,555,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,223,556,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[556,223,561,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[561,223,567,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,223,573,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[573,223,574,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[574,223,577,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[577,223,578,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[578,223,579,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[579,223,580,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[580,223,582,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[582,223,583,223]);o.gc.paint();o.gc.drawLine.apply(o.gc,[583,223,584,222]);o.gc.paint();o.gc.drawLine.apply(o.gc,[584,222,584,221]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,195,567,196]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,196,567,197]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,197,567,198]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,198,567,199]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,199,567,200]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,200,567,201]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,201,567,202]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,202,567,203]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,203,567,204]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,204,567,205]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,205,567,206]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,206,567,207]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,207,567,208]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,208,567,210]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,210,567,212]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,212,567,214]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,214,567,217]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,217,570,221]);o.gc.paint();o.gc.drawLine.apply(o.gc,[570,221,571,228]);o.gc.paint();o.gc.drawLine.apply(o.gc,[571,228,572,233]);o.gc.paint();o.gc.drawLine.apply(o.gc,[572,233,574,237]);o.gc.paint();o.gc.drawLine.apply(o.gc,[574,237,574,243]);o.gc.paint();o.gc.drawLine.apply(o.gc,[574,243,577,251]);o.gc.paint();o.gc.drawLine.apply(o.gc,[577,251,579,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[579,258,580,265]);o.gc.paint();o.gc.drawLine.apply(o.gc,[580,265,582,268]);o.gc.paint();o.gc.drawLine.apply(o.gc,[582,268,584,273]);o.gc.paint();o.gc.drawLine.apply(o.gc,[584,273,586,280]);o.gc.paint();o.gc.drawLine.apply(o.gc,[586,280,586,283]);o.gc.paint();o.gc.drawLine.apply(o.gc,[586,283,587,285]);o.gc.paint();o.gc.drawLine.apply(o.gc,[587,285,589,289]);o.gc.paint();o.gc.drawLine.apply(o.gc,[589,289,590,293]);o.gc.paint();o.gc.drawLine.apply(o.gc,[590,293,592,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[592,297,593,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[593,302,596,309]);o.gc.paint();o.gc.drawLine.apply(o.gc,[596,309,598,311]);o.gc.paint();o.gc.drawLine.apply(o.gc,[598,311,599,313]);o.gc.paint();o.gc.drawLine.apply(o.gc,[599,313,601,316]);o.gc.paint();o.gc.drawLine.apply(o.gc,[601,316,601,317]);o.gc.paint();o.gc.drawLine.apply(o.gc,[601,317,602,318]);o.gc.paint();o.gc.drawLine.apply(o.gc,[602,318,604,319]);o.gc.paint();o.gc.drawLine.apply(o.gc,[604,319,606,321]);o.gc.paint();o.gc.drawLine.apply(o.gc,[606,321,608,323]);o.gc.paint();o.gc.drawLine.apply(o.gc,[608,323,609,324]);o.gc.paint();o.gc.drawLine.apply(o.gc,[609,324,609,323]);o.gc.paint();o.gc.drawLine.apply(o.gc,[609,323,610,317]);o.gc.paint();o.gc.drawLine.apply(o.gc,[610,317,612,312]);o.gc.paint();o.gc.drawLine.apply(o.gc,[612,312,618,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[618,297,618,293]);o.gc.paint();o.gc.drawLine.apply(o.gc,[618,293,618,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[618,292,617,290]);o.gc.paint();o.gc.drawLine.apply(o.gc,[617,290,616,290]);o.gc.paint();o.gc.drawLine.apply(o.gc,[616,290,614,290]);o.gc.paint();o.gc.drawLine.apply(o.gc,[614,290,612,290]);o.gc.paint();o.gc.drawLine.apply(o.gc,[543,258,544,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[544,258,545,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[545,258,550,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[550,258,551,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[551,258,552,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[552,258,553,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[553,258,554,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[554,258,557,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[557,258,559,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[559,258,560,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[560,258,561,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[561,258,562,258]);o.gc.paint();o.gc.drawLine.apply(o.gc,[562,258,563,257]);o.gc.paint();o.gc.drawLine.apply(o.gc,[554,269,554,271]);o.gc.paint();o.gc.drawLine.apply(o.gc,[554,271,554,274]);o.gc.paint();o.gc.drawLine.apply(o.gc,[554,274,554,276]);o.gc.paint();o.gc.drawLine.apply(o.gc,[554,276,555,282]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,282,555,284]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,284,555,288]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,288,555,289]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,289,555,293]);o.gc.paint();o.gc.drawLine.apply(o.gc,[555,293,555,294]);o.gc.paint();o.gc.drawLine.apply(o.gc,[545,304,548,303]);o.gc.paint();o.gc.drawLine.apply(o.gc,[548,303,550,302]);o.gc.paint();o.gc.drawLine.apply(o.gc,[550,302,552,301]);o.gc.paint();o.gc.drawLine.apply(o.gc,[552,301,556,299]);o.gc.paint();o.gc.drawLine.apply(o.gc,[556,299,557,297]);o.gc.paint();o.gc.drawLine.apply(o.gc,[557,297,567,293]);o.gc.paint();o.gc.drawLine.apply(o.gc,[567,293,570,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[570,292,571,292]);o.gc.paint();o.gc.drawLine.apply(o.gc,[571,292,572,291]);o.gc.paint();o.gc.drawLine.apply(o.gc,[572,291,573,290]);o.gc.paint();o.gc.drawLine.apply(o.gc,[573,290,573,289]);o.gc.paint();o.gc.drawLine.apply(o.gc,[590,201,591,202]);o.gc.paint();o.gc.drawLine.apply(o.gc,[591,202,594,205]);o.gc.paint();o.gc.drawLine.apply(o.gc,[594,205,597,208]);o.gc.paint();o.gc.drawLine.apply(o.gc,[597,208,598,209]);o.gc.paint();o.gc.drawLine.apply(o.gc,[598,209,600,211]);o.gc.paint();o.gc.drawLine.apply(o.gc,[600,211,601,214]);o.gc.paint();o.gc.drawLine.apply(o.gc,[601,214,601,213]);o.gc.paint(); </textarea> </BODY></HTML>- JS画板
- 简易画板js
- h5+js 画板canvas
- js和html5实现画板
- 画板
- 画板
- 画板
- 画板
- JS底层实现canvas在线画板
- 利用Leap Motion+JS 实现简易的隔空网页画板
- 做画板
- WP7 ,画板
- ios 画板
- 简易画板
- 涂鸦画板
- 画板案例
- Android画板
- Bitmap画板
- QT小例子GUI（主）线程与子线程之间的通信
- Zend Framework 多模块 MVC---留言板
- 数据库索引学习——科学建立索引，提高查询速度
- 处理PHP字符串的10个简单方法
- Android Emergency Call 号码
- JS画板
- 深入浅出之正则表达式
- 动态设置TabHost选项卡属性及自定义TabHost选项Layout
- 娱乐：输出π的前781位
- Oracle 子查询
- iOS-学习 Objective-C
- 清理没有用到的css
- 在VC中检测内存泄漏
- 某知名公司interview
