`

用dhtml和javascript画矢量图的英文版

 
阅读更多
German version German version
home
DHTML, JavaScript: Draw Ellipse, Oval, Circle, Polygon, Triangle, Rectangle, Line, PolylineHome DHTML-Drag&Drop-Library Tooltips Function-Grapher
<nobr>.drawEllipse()</nobr>
These are not image files.
Shapes & text have been dynamically drawn with wz_jsgraphics.js.
<nobr>.drawLine()</nobr>
.drawPolyline()
.drawPolygon()
.fillEllipse()
<nobr>.drawRect()</nobr>
DHTML, JavaScript
Draw Line, Circle, Ellipse (Oval), Polyline, Polygon, Rectangle.

High Performance JavaScript Vector Graphics Library.

Developed by Walter Zorn

DHTML, JavaScript: Draw Ellipses, Ovals, Circles, Polygons, Triangles, Rectangles, Lines, Polylines
Performance?

Cross Browser?

Documentation

Download
This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage. Usage of this Vector Graphics library should be easy even if you don't have JavaScript experience. Documentation. Another goal during development of this JavaScript Draw Shapes Vector Graphics Library was to achieve optimized performance and cleanly arranged pixel stair-step patterns (pixel-optimization).


Try it out:
x1 y1 x2 y2
x y w h
x y w h
xy
x y w h
x y w h
setColor("#") setStroke() setStroke(Stroke.DOTTED)
Test Canvas



Performance
DHTML, JavaScript: Draw Ellipse, Oval, Circle, Polygon, Triangle, Rectangle, Line, Polyline
Top of Page

Performance?

Cross Browser?

Documentation

Download
In HTML there are no such elements as oblique lines, circles, ellipses or other non-rectangularly bounded elements available. For a workaround, pixels might be painted by creating small background-colored layers (DIV elements), and arranging these to the desired pattern. Creating a separate DIV for each pixel of the pattern, however, would be very inefficient since each of these DIVs inevitably has to lug its complete browser-internal object overhead. <script type="text/javascript"> <!-- function drwPxOv(hnd, left, top, width, height, fact, bad) { var a = width>>1, b = height>>1, cx = left + a*fact, cy = top + b*fact, x = 0, y = b, ox = 0, oy = b, a2 = (a*a)<<1, b2 = (b*b)<<1, st = (a2>>1)*(1-(b<<1)) + b2, tt = (b2>>1) - a2*((b<<1)-1); if (bad) hnd.drawRect(cx+fact*x, cy-fact*y, fact, fact); do { if (st<0) { st += b2*((x<<1)+3); tt += (b2<<1)*(x+1); x++; } else if (tt<0) { st += b2*((x<<1)+3) - (a2<<1)*(y-1); tt += (b2<<1)*(x+1) - a2*((y<<1)-3); x++; y--; if (!bad) hnd.drawRect(cx+fact*ox, cy-fact*oy, fact*(x-ox), fact*(oy-y)); ox = x; oy = y; } else { st -= (a2<<1)*(y-1); tt -= a2*((y<<1)-3); y--; } if (bad) hnd.drawRect(cx+fact*x, cy-fact*y, fact, fact); } while (y>0); if (!bad) hnd.drawRect(cx+fact*ox, cy-fact*oy, fact*(a-ox+1), fact*(oy+1)); } /////////////// Pixel stairs demo /////////////// var jg = new jsGraphics(); jg.htm += '<table align="left" width="354" cellpadding="0"><tr><td height="150" valign="top"><div id="stairsdemo" style="position:relative;width:350px;height:150px;">'; jg.setFont("verdana,geneva,sans-serif", "10px", Font.PLAIN); jg.setColor("#ee8800"); jg.drawString("Image dynamically drawn with wz_jsgraphics.js", 0, 2); jg.setFont("verdana,geneva,sans-serif", "11px", Font.PLAIN); jg.setColor("#ff0099"); jg.drawString("unfavourable", 10, 129); jg.drawRect(0, 25, 10, 10); jg.drawRect(10, 25, 10, 10); jg.drawRect(20, 25, 10, 10); jg.drawRect(20, 35, 10, 10); jg.drawRect(30, 35, 10, 10); jg.drawRect(40, 35, 10, 10); jg.drawRect(40, 45, 10, 10); jg.drawRect(50, 45, 10, 10); jg.drawRect(60, 45, 10, 10); jg.drawRect(60, 55, 10, 10); jg.drawRect(60, 65, 10, 10); jg.drawRect(70, 65, 10, 10); jg.drawRect(70, 75, 10, 10); jg.drawRect(70, 85, 10, 10); jg.drawRect(80, 85, 10, 10); jg.drawRect(80, 95, 10, 10); jg.drawRect(80, 105, 10, 10); jg.setColor("#008800"); jg.drawString("better", 130, 129); drwPxOv(jg, 30, 25, 16, 16, 10, true); jg.setColor("#0000cc"); jg.drawString("optimal", 260, 129); drwPxOv(jg, 150, 25, 16, 16, 10); jg.htm += '<//div><//td><//tr><//table>'; jg.paint(); //--> </script>
Image dynamically drawn with wz_jsgraphics.js
unfavourable
better
optimal


To minimize the amount of this overhead and to optimize performance to what's possible, this Draw Shapes JavaScript VectorGraphics Library, besides using fast algorithms (based on Bresenham algorithms) to compute the shapes, minimizes the number of required DIVs by combining as many pixels into each DIV as possible. Therefore, as illustrated by the picture on the left, the number of DIV elements is decreased [1] from one per pixel to one per pixel stair-step.

However, don't compare the performance with Java or stand-alone applications! Making a browser create DIV elements is of course much slower than just colouring pixels. Even this JavaScript Vectorgraphics Library can't escape from this fundamental restriction - it just tries to squeeze out the maximum of what's possible. It's recommended to refrain from creating shapes that extend more than 600 - 1000 pixels in both dimensions.

Alternative to SVG? Currently SVG-capable browsers or browsers with a correctly included SVG plugin are still rare. Therefore you might use this vector graphics library as an non-proprietary alternative for small or not-too-complex graphic elements, presumably running on the machines of more than 95% of all internet visitors. Moreover, since this vectorgraphics library allows graphics to overflow the borders of their "canvases", it can render to almost everywhere on a page.




Cross Browser Functionality?
Linux:
Browsers with Gecko-Engine (Mozilla, Netscape6+, Galeon), Konqueror, Netscape4, Opera5, 6 and 7.

Windows:
Gecko-Browsers, IE 4, 5 and 6, Netscape4, Opera5, 6 and 7.

Mac:
Safari, Gecko-Browsers, Opera, Netscape 4, partially IE.

The functionality "Draw into html elements even after the page has fully loaded" isn't available for Operaprior to version7 and Netscape4, whereas "Draw into the document while the page is parsed" is cross-browser capable.





Documentation: How to Use the JavaScript Graphics Library

1. Include the Library
Insert the following code into the head-section of the html file (between <head> and </head>):

<script type="text/javascript" src="wz_jsgraphics.js"></script>


2. HTML: <div> Elements as Canvases

This step isn't required for the mode "Draw directly into the document while the page is parsed". To draw into DIV elements even after the page has fully loaded, however, relatively as well as absolutely positioned layers (DIV elements) are appropriate to serve as canvases. Each of these layers must have a unique ID:
<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div>
...
<div id="anotherCanvas" style="position:relative;height:100px;width:300px;"></div>


3. Save the JavaScript Vectorgraphics Library

Download the JavaScript Vector Graphics Library and unzipp it into the same directory as the html file. If you'd prefer the library to be placed in a different directory, adapt the path src="wz_jsgraphics.js" in the code piece above.







How to Draw Shapes
DHTML, JavaScript: Draw Ellipses, Ovals, Circles, Polygons, Triangles, Rectangles, Lines, Polylines
Top of Page

Performance?

Cross Browser?

Documentation

Download
1. Create a jsGraphics Object
a) Draw into DIV elements even after the page has fully loaded:
(This mode doesn't work in Netscape4 and Opera<7.) See the example below how to create a jsGraphics object for a certain DIV element. This code should be inserted into the html code past the concerned DIV element, but in any case ahead of the closing body tag. The ID (in quotation marks) of the selected DIV element must be passed to the constructor function newjsGraphics():
<script type="text/javascript">
<!--

var jg = new jsGraphics("myCanvas");

//-->
</script>
If there are several separate DIV elements, each requires its own jsGraphics instance:
<script type="text/javascript">
<!--

var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");

//-->
</script>



b) Draw directly into the document while the page is parsed:
Works even in Netscape 4 and Opera 5/6. Instead of the ID of a DIV element, nothing (or the value null) must be passed to the constructor function:

<script type="text/javascript">
<!--

var jg_doc = new jsGraphics();

//-->
</script>

Instead of jg, jg2 or jg_doc you may choose any other variable name, provided it follows the rules for variable names in JavaScript.



2. Functions to Draw Shapes

Once generated, these graphics objects (in this expample jg, jg2 and/or jg_doc) can be used to call the Draw Shapes methods. The shapes generated by a certain graphics object will be drawn into the concerned html element, or, with mode b) used, into the document itself:

<script type="text/javascript">
<!--
function myDrawFunction()
{
jg_doc.setColor("#00ff00"); // green
jg_doc.fillEllipse(100,200,100,180);//co-ordinatesrelatedtothedocument
jg_doc.setColor("maroon");
jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
jg_doc.paint(); // draws, in this case, directly into the document

jg.setColor("#ff0000"); // red
jg.drawLine(10,113,220,55);//co-ordinatesrelatedto"myCanvas"
jg.setColor("#0000ff"); // blue
jg.fillRect(110, 120, 30, 60);
jg.paint();

jg2.setColor("#0000ff"); // blue
jg2.drawEllipse(10, 50, 30, 100);
jg2.drawRect(400, 10, 100, 50);
jg2.paint();
}

var jg_doc=newjsGraphics();//drawdirectlyintodocument
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");

myDrawFunction();

//-->
</script>

As illustrated in this example, at first the color of the "pen" should be set. Otherwise the default color black will be used. The coordinates passed to the Draw Shapes methods refer either, if mode b) used, to the left-top corner of the document itself, or to the left-top corner of the concerned DIV. For each canvas (graphics object) separately, its paint() method must be called explicitly to render the internally-generated graphics html. Otherwise nothing will happen on your screen.
Name of function (method) Code example as to be used with the above example object 'jg' (which is the context of the DIV called "myCanvas")
General Notes

1.) Numbers passed to these functions must always be integer numbers, rather than decimal point numbers (floating point numbers), characters or strings. For instance, values obtained from formular inputs are always strings, and results from previous JavaScript calculations typically floating point numbers. Use either the predefined parseInt() or the Math.round() JavaScript function to convert data to integer. Example:
jg.setStroke(parseInt(document.MyForm.Linewidth.value));

2.) Consider that co-ordinates lie between pixels, not on them, and that the drawing "pen" hangs beneath and to the right of the path specified by co-ordinates passed to the functions.
setColor("#HexColor");

Specifies the color of the drawing "pen". Once set, this color will be used by the subsequently called drawing methods until it will be overridden through another call of setColor(). The value must be enclosed in quotation marks, and should be hexadecimal following the pattern "#rrggbb" (as usual with HTML). Color names available in HTML (for instance "maroon") may be used as well.
jg.setColor("#ff0000");

or with identical result

jg.setColor("red");
setStroke(Number);

Specifies the thickness of the drawing "pen" for lines and bounding lines of shapes. Once set, this thickness will be used by the subsequently called drawing methods until it will be overridden through another call of setStroke(). Default line thickness is 1px, as long as .setStroke() has not yet been invoked.

To create dotted lines, setStroke() requires the constant Stroke.DOTTED as argument. Width of dotted lines is always 1 pixel.
jg.setStroke(3);

or

jg.setStroke(Stroke.DOTTED);
drawLine(X1, Y1, X2, Y2);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:50px;height:13px;"><table cellpadding="0" cellspacing="0"><tr><td>'; jg.setStroke(2); jg.setColor("#ff6666"); jg.drawLine(0, 11, 40, 0); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
Line from the first to the second pair of coordinates. Line thickness is either 1px or the value most recently specified by .setStroke().
jg.drawLine(20,50,453,40);
drawPolyline(Xpoints, Ypoints);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:50px;height:13px;"><table cellpadding="0" cellspacing="0"><tr><td>'; jg.setColor("#55aaaa"); jg.drawPolyLine(new Array(0, 10, 20, 30, 40), new Array(0, 11, 0, 11, 0)); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
A polyline is a series of connected line segments. Xpoints and Ypoints are arrays which specify the x and y coordinates of each point as follows:
var Xpoints = new Array(x1,x2,x3,x4,x5);
var YPoints = new Array(y1,y2,y3,y4,y5);

Instead of Xpoints and Ypoints you may of course use other names provided these follow the rules for JavaScript variable names.

Line thickness is either 1px or the value most recently specified by .setStroke().
var Xpoints = new Array(10,85,93,60);
var YPoints = new Array(50,10,105,87);
jg.drawPolyline(Xpoints,Ypoints);
drawRect(X,Y,width,height);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:50px;height:13px;"><table cellpadding="0" cellspacing="0"><tr><td>'; jg.setColor("#6666ff"); jg.drawRect(0, 0, 40, 11); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
Outline of a rectangle. X and Y give the co-ordinates of the left top corner. Line thickness is either 1px or the value most recently specified by .setStroke().
jg.drawRect(20,50,70,140);
fillRect(X,Y,width,height);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:50px;height:13px;"><table cellpadding="0" cellspacing="0"><tr><td>'; jg.setColor("#ffcc66"); jg.fillRect(0, 0, 40, 11); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
Filled rectangle. X and Y give the co-ordinates to the left top corner.
jg.fillRect(20,50,453,40);
drawPolygon(Xpoints, Ypoints);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:50px;height:13px;"><table cellpadding="0" cellspacing="0"><tr><td>'; jg.setColor("#cc66cc"); jg.drawPolygon(new Array(0, 20, 40, 20), new Array(5, 0, 5, 11)); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
Polygon. Xpoints and Ypoints are arrays which specify the x and y coordinates of the polygon's corners as follows:
var Xpoints = new Array(x1,x2,x3,x4,x5);
var Ypoints = new Array(y1,y2,y3,y4,y5);

The polygon will be automatically closed if the first and last points are not identical.

Line thickness is either 1px or the value most recently specified by .setStroke().
var Xpoints = new Array(10,85,93,60);
var Ypoints = new Array(50,10,105,87);
jg.drawPolygon(Xpoints, Ypoints);


Instead of Xpoints and Ypoints you may of course use other names provided these follow the rules for variable names.
fillPolygon(Xpoints, Ypoints);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:50px;height:13px;"><table cellpadding="0" cellspacing="0"><tr><td>'; jg.setColor("#99ccff"); jg.fillPolygon(new Array(0, 20, 40, 20), new Array(6, -1, 6, 13)); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
Filled Polygon. Parameters as for drawPolygon()
jg.fillPolygon(new Array(10,85,93,60), new Array(50,10,105,87));
drawEllipse(X,Y,width,height);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:50px;height:13px;"><table cellpadding="0" cellspacing="0"><tr><td>'; jg.setColor("#55bb55"); jg.drawOval(0, -1, 40, 12); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
Outline of an ellipse. Values refer to the bounding rectangle of the ellipse, X and Y give the co-ordinates of the left top corner of that rectangle rather than of its center. Line thickness is either 1px or the value most recently specified by .setStroke().
jg.drawEllipse(20,50,70,140);
or
jg.drawOval(20,50,70,140);
fillEllipse(X,Y,width,height);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:50px;height:13px;"><table cellpadding="0" cellspacing="0"><tr><td>'; jg.setColor("#ffccdd"); jg.fillOval(0, -1, 41, 13); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
Filled ellipse. Values refer to the bounding rectangle of the ellipse, X and Y give the co-ordinates of the left top corner of that rectangle rather than of its center.
jg.fillEllipse(20,50,71,141);
or
jg.fillOval(20,50,71,141);
setFont("font-family", "size+unit", Style);

This method can be invoked prior to drawString() to specify or change font-family, -size and -style. Values or font-family and -size may be whatever possible in HTML, and must be enclosed in quotation marks.

Available font styles:
Font.PLAIN for normal style (not bold, not italic)
Font.BOLD for bold fonts
Font.ITALIC for italics
Font.ITALIC_BOLD or Font.BOLD_ITALIC to combine the latters.
Example: see drawString() below
drawString("Text", X, Y);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:400px;height:16px;"><table cellpadding="0" cellspacing="0" width="400"><tr><td>'; jg.setFont("arial,helvetica,sans-serif", "15px", Font.ITALIC_BOLD); jg.setColor("#cc6600"); jg.drawString("I've been drawn with the Vectorgraphics Library...", 0, 0); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
I've been drawn with the Vectorgraphics Library...
Writes text to the location specified by X and Y. Differently from Java, these coordinates refer to the left top corner of the first line of the text. The string passed to drawString() must be enclosed in quotation marks. (Non-escaped) HTML tags inside the string will be interpreted. For example, "SomeText<br>moreText" would indeed create a line break.
jg.setFont("arial","15px",Font.ITALIC_BOLD);
jg.drawString("SomeText",20,50);
drawStringRect("Text", X, Y, Width, Alignment);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:400px;height:100px;"><table cellpadding="0" cellspacing="0" width="400"><tr><td>'; jg.setFont("verdana,geneva,sans-serif", "11px", Font.BOLD); jg.setColor("#009999"); jg.drawStringRect("A text drawn by using drawStringRect() which allows to set the width of the text rectangle and to align the text horizontally (in this case &quot;right&quot;)", 4, 4, 292, "right"); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
A text drawn by using drawStringRect() which allows to set the width of the text rectangle and to align the text horizontally (in this case "right")
Like drawString. Allows however to set the width of the text rectangle and to specify the horizontal text-alignment. Text-alignment value must be a string (i.e. enclosed in quotation marks or apostrophes) and can be either "left", "center", "right" or "justify".
jg.setFont("verdana","11px",Font.BOLD);
jg.drawStringRect("Text",20,50,300,"right");
drawImage("src", X, Y, width, height);
<script type="text/javascript"> <!-- jg.htm += '<div style="position:relative;width:400px;height:64px;"><table cellpadding="0" cellspacing="0" width="400"><tr><td>'; jg.drawImage("../images/dragdrop/deddie.jpg", 0, 0, 90, 62); jg.htm += '<//td><//tr><//table><//div>'; jg.paint(); //--> </script>
Draws image on the specified location. "src" parameter specifies path, width and height parameters allow to stretch the image (almost) arbitrarily.

Optionally, drawImage() accepts a fifth parameter which you can use to insert an eventhandler into the generated image tag. Example:
jg.drawImage('anImg.jpg',8,5,95,70,'onmouseover="YourFunc()"');

jg.drawImage("friendlyDog.jpg", 20,50,100,150);
paint();

Must be envoked explicitly to draw the internally-generated graphics into the html page. To optimize performance it's recommended to restrain from calling paint() in unnecessarily short intervals.

Avoid something like:
jg.drawEllipse(0, 0, 100, 100);
jg.paint();
jg.drawLine(200, 10, 400, 40);
jg.paint();
...


The following will be faster:
jg.drawEllipse(0, 0, 100, 100);
jg.drawLine(200, 10, 400, 40);
/*...further drawing methods... */
jg.paint();
jg.paint();
clear();

Any content created by the Graphics JavaScript Library will be deleted (within the canvas the graphics object refers to). The default content of the canvas (content not created by the script) will remain untouched, i.e. neither be changed nor be deleted.
jg.clear();

Any stuff within "myCanvas" (in these examples the DIV 'jg' refers to) drawn by the script is deleted.
setPrintable(true);

By default, printing shapes isn't feasible since default printing settings of browsers usually prevent background colors from being printed. Invoking setPrintable() with the parameter true enables wz_jsgraphics.js to draw printable shapes (at least in Mozilla/Netscape6+ and IE). However, at the price of a slightly decreased rendering speed (about 10% to 25% slower).
jg.setPrintable(false);

The parameter false switches wz_jsgraphics.js back to non-printable mode. The benefit from this, however, will be re-optimized rendering performance.




Download

Top of Page

Performance?

Cross Browser?

Documentation

Download
wz_jsgraphics.js 2.33 zipped 5.38 KB (not MB)
wz_jsgraphics.zip

History of Updates (it's recommended to read this, especially if you aren't sure about the benefits from an update :-) ).





Notes
[1]
If we assume the probability of line angles on the screen to be equally distributed over 360°:
Then for 1 px wide lines the number of layers is averagely sin(45°)/(1-sin(45°))=2.41 times larger if for each pixel a separate layer is created, compared with a solution that requires merely one layer per pixel stair-step (as is the case with this library). This is true under the assumption that both algorithms let pixel stair-steps touch each other corner-by-corner rather than side-by-side. Otherwise the number of pixels to be colored would be larger, and therefore the disadvantage of an unfavorable one-layer-per-pixel algorithm even bigger.

Walter Zorn, Munich, 2005










visitors on www.walterzorn.com since 27. 12. 2002
<script type="text/javascript"> <!-- var no_dhtm = (document.layers || window.opera && !document.defaultView); function ZOOM() { if (document.body && document.body.style && typeof document.body.style.zoom != "undefined") { if (document.body.style.zoom=="400%") document.body.style.zoom = "100%"; else { document.body.style.zoom = "400%"; alert('You/'ve doubleclicked on the document./nDoubleclick again to unzoom.'); } } } document.ondblclick=ZOOM; function DRAW(shape) { if (jg_n4 || window.opera && !document.defaultView) { alert('In Netscape 4 and Opera < version 7, the functionality/n"Draw into a canvas, even after the page has fully loaded" isn/'t available./nThese browsers can only draw directly into the document/nwhile the page is parsed.'); return; } if (window.event) event.cancelBubble = true; var f=document.forms[0]; var color = ''+f.Color.value; for (var z = 0; z<color.length; z++) if (isNaN(parseInt(color.charAt(z), 16))) color = color.substring(0, z) + '6' + color.substring(z+1); var t0 = (new Date()).getTime(); jg2.setColor("#"+color); jg2.setStroke(f.Dotted.checked? Stroke.DOTTED : parseInt(f.Stroke.value)); if (shape=="drawLine()") jg2.drawLine(parseInt(f.dl_x1.value), parseInt(f.dl_y1.value), parseInt(f.dl_x2.value), parseInt(f.dl_y2.value)); else if (shape=="drawRect()") jg2.drawRect(parseInt(f.dr_x.value), parseInt(f.dr_y.value), parseInt(f.dr_w.value), parseInt(f.dr_h.value)); else if(shape=="fillRect()") jg2.fillRect(parseInt(f.fr_x.value), parseInt(f.fr_y.value), parseInt(f.fr_w.value), parseInt(f.fr_h.value)); else if(shape=="drawEllipse()") jg2.drawEllipse(parseInt(f.do_x.value), parseInt(f.do_y.value), parseInt(f.do_w.value), parseInt(f.do_h.value)); else if(shape=="fillEllipse()") jg2.fillEllipse(parseInt(f.fo_x.value), parseInt(f.fo_y.value), parseInt(f.fo_w.value), parseInt(f.fo_h.value)); else if(shape=="fillPolygon()") { var pgx = f.fp_x.value.split(','); var pgy = f.fp_y.value.split(','); var comm = '/n /nNote:/nValues must be separated with commas from each other.'; if (pgx.length!=pgy.length) alert('The number of x und y values must be equal.'+comm); else { for (var z = 0; z<pgx.length; z++) { if (isNaN(pgx[z] = parseInt(pgx[z])) || isNaN(pgy[z] = parseInt(pgy[z]))) { alert('Invalid x or y value.'+comm); return; } } jg2.fillPolygon(pgx, pgy); } } jg2.paint(); var t1 = (new Date()).getTime() - t0; jg3.clear(); jg3.setColor('#'+color); jg3.setFont('verdana,geneva,sans-serif', '12px', Font.BOLD); jg3.drawString(t1 + ' milliseconds', 0, 10); jg3.paint(); } var jg2=new jsGraphics("test"); var jg3 = new jsGraphics("dt"); function D() { var wc = (window.innerWidth? innerWidth : (document.documentElement && document.documentElement.clientWidth)? document.documentElement.clientWidth : (document.body && document.body.clientWidth)? document.body.clientWidth : document.getElementsByTagName? document.getElementsByTagName('body')[0].offsetWidth : 800) >>1; var dy = no_dhtm? 115 : 0; var jg = new jsGraphics(no_dhtm? null : "main"); jg.setColor("#ff9900"); jg.setFont("arial,helvetica,sans-serif", "11px", Font.PLAIN); jg.drawString("<nobr>.drawEllipse(&nbsp;)<//nobr>",35, 180+dy); jg.drawLine(62, 197+dy, 48, 234+dy); jg.drawLine(48, 234+dy, 45, 224+dy); jg.drawLine(49, 234+dy, 57, 228+dy); jg.drawEllipse(16, 240+dy, 59, 130); jg.setColor("#008800"); jg.drawOval((250+wc+300)>>1, 4+dy, 64, 64); jg.drawString("These are not image files.<br>Shapes &amp; text have been dynamically drawn with wz_jsgraphics.js.", ((wc+280)>>1)-60, 190+dy); jg.setColor("#ff0099"); jg.drawLine(120, -60+dy, 265, 150+dy); jg.drawString("<nobr>.drawLine(&nbsp;)<//nobr>", 190, 145+dy); var polylx=new Array(420, ((wc+280)>>1)+250, ((wc+280)>>1)+120, (wc<<1)-100); var polyly=new Array(160+dy, 110+dy, 350+dy, 450+dy); jg.drawPolyline(polylx, polyly); jg.drawString(".drawPolyline(&nbsp;)", ((wc+280)>>1)+126, 155+dy); jg.setColor("#ffddaa"); jg.setStroke(5); jg.drawPolygon(new Array(379, 385, 391, 410, 391, 385, 379, 360), new Array(19+dy, 0+dy, 19+dy, 25+dy, 31+dy, 50+dy, 31+dy, 25+dy)); jg.setStroke(1); var polygx=new Array(177, 247, 115); var polygy=new Array(24+dy, 45+dy, 140+dy); jg.setColor("#0000cc"); jg.drawPolygon(polygx, polygy); jg.drawString(".drawPolygon(&nbsp;)", 256, 30+dy); jg.drawString(".fillEllipse(&nbsp;)", wc+214, 200+dy); jg.setColor("#990099"); jg.drawRect(wc+280, dy, 40, 50); jg.setStroke(Stroke.DOTTED); jg.drawEllipse(wc+250, dy+86, 48, 60); jg.setStroke(1); jg.drawString("<nobr>.drawRect(&nbsp;)<//nobr>", wc+210, 20+dy); jg.setColor("#ccddff"); jg.setStroke(5); jg.drawOval(300, 110+dy, 80, 50); jg.setStroke(1); jg.fillEllipse(wc+285, 190+dy, 70, 40); jg.fillOval(wc+292, 36+dy, 15, 15); jg.setColor("#990099"); jg.drawOval(wc+292, 36+dy, 14, 14); jg.setColor("#000033"); jg.fillRect(wc+295, 41+dy, 2, 2); jg.fillRect(wc+302, 41+dy, 2, 2); jg.drawLine(wc+295, 45+dy, wc+296, 46+dy); jg.drawLine(wc+297, 47+dy, wc+301, 47+dy); jg.drawLine(wc+301, 47+dy, wc+303, 45+dy); jg.paint(); } if(document.all && !document.getElementById) { window.onload = function() { window.setTimeout("D();", 100); } } else D(); //--> </script><!--script type="text/javascript" src="../scripts/wz_dragdrop.js"></script> <script language="JavaScript" type="text/javascript"> <!- SET_DHTML(CURSOR_MOVE, KEYDOWN_RESIZE, "test", "stairsdemo"); //-> </script-->
分享到:
评论

相关推荐

    DHTML&javascript 使用手册

    DHTML&javascript 使用手册 动态 HTML (DHTML) 对象模型参考 DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 DHTML 集合 HTML 参考 HTML 元素 HTML 字符集 样式表(CSS)参考 CSS 属性参考 CSS 长度单位参考...

    Web开发中的矢量绘图处理和应用

    通过JavaScript操作canvas元素的API,开发者可以直接在画布上绘制路径、矩形、圆形等矢量图形,还可以实现图像的动态更新和动画效果。 - **SVG**:SVG是一种基于XML的矢量图形格式,与VML相比,SVG得到了更广泛的...

    DHTML中文参考手册

    **VML网页矢量图** VML(Vector Markup Language)是用于在网页上绘制矢量图形的一种技术。DHTML手册可能会介绍如何创建、操作和动画化VML图形,以及如何与其他DHTML元素结合使用。 **命令标识符** 命令标识符...

    HTML_DHTML开发手册

    HTML5是目前最新的版本,引入了许多新特性,如离线存储、音频/视频元素、Canvas画布、SVG矢量图以及新的表单控件等,极大地丰富了网页的展示效果和功能。 **DHTML:动态HTML** DHTML是在HTML基础上加入CSS...

    html、DHTML 手册API

    1. **CSS**:负责网页的样式和布局,DHTML利用CSS实现了元素的动态定位和动画效果。 2. **DOM**:是HTML和XML文档的结构化表示,JavaScript可以通过DOM操作网页元素,实现动态更新内容。 3. **JavaScript**:提供了...

    DHTML 对象模型参考

    HTML5引入了许多新特性,如音频、视频、 canvas画布、SVG矢量图等,这些都为DHTML提供了更多动态元素的可能性。 **2. CSS参考** CSS用于控制网页的外观和布局,包括字体、颜色、布局、动画效果等。在DHTML中,CSS...

    Web GIS平台上矢量图形可视化的JVGL方法.pdf

    JVGL完全基于DHTML和JavaScript技术实现。DHTML是传统HTML的动态扩展,在JavaScript或VBScript的基础上提供了一个扩展的文档对象模型DOM,并允许在数据流关闭之后,由JavaScript或VBScript代碼来动态地改变Web页面的...

    DHTML手册介绍—网页制作完全手册

    DHTML(Dynamic HTML),动态HTML,是HTML的一种增强技术,它结合了HTML、CSS、JavaScript以及DOM(Document Object Model)等元素,使得网页内容能够实现动态交互和更新,无需页面刷新。本手册详细介绍了DHTML在...

    Jquery详解 dhtml js css手册

    4. **HTML5新特性**:DHTML也包括HTML5的新元素和API,如Canvas绘图、SVG矢量图、WebSocket实时通信等。 **CSS3.0参考手册** CSS3是CSS的最新版本,引入了许多新特性和增强。`css3.0参考手册.chm`可能包含: 1. *...

    DHTML 参考手册.

    综上所述,DHTML参考手册是理解并应用这些技术的宝贵资源,它涵盖了从基础概念到高级技巧的各个方面,对于希望深入学习和使用DHTML的开发者来说非常有价值。尽管现代Web开发中已有了更多的选择,如React、Vue等框架...

    javascript中文手册

    JavaScript中文手册是一本详尽的资源,旨在帮助中文使用者深入理解和掌握JavaScript这门编程语言。JavaScript,有时简称为JS,是互联网上最广泛使用的客户端脚本语言,它主要用于增强网页的交互性和动态功能。这份...

    DHTML HTML5帮助文档

    SVG则是矢量图格式,支持高质量的图形和图像处理。 5. **Geolocation API**:HTML5提供了获取用户地理位置的能力,为地理位置相关的应用提供了便利。 6. **Web Workers和Web Storage**:Web Workers允许在后台执行...

    DHTML参考手册.rar

    Web 开发常用手册! 1 动态 HTML (DHTML) 对象模型参考 DHTML 对象 DHTML 属性 DHTML 方法 DHTML 事件 ...可视化滤镜和切换参考 HTML+TIME参考 网页矢量图形标记语言 HTML 应用程序 技巧 语言代码 颜色表

    DHTML网页制作完全手册

    1. **DHTML**:DHTML是一种结合HTML、CSS、JavaScript和DOM(文档对象模型)的技术,用于创建交互式和动态的网页内容。它允许网页在不重新加载整个页面的情况下改变内容、样式和结构,实现如下拉菜单、滑动效果、...

    javascript常见的7个框架

    YUI 工具包利用 DOM 脚本来简化浏览器内的开发(in-browser devolvement),使用 DHTML 和 AJAX 的特性开发所有的 Web 程序。YUI 控件库为您提供了一组高交互性性的可视化元素,这些元素完全在客户端创建维护,不...

    DHTML标记大全、API文档

    在网页开发领域,DHTML(Dynamic HTML)是一种用于创建交互式和动态网页的技术,它结合了HTML、CSS、JavaScript以及DOM(Document Object Model)来实现页面的动态效果。这份"DHTML标记大全、API文档"是网页开发者不...

    动态 HTML (DHTML) 对象模型参考

    网页制作完全手册 ...可视化滤镜和切换参考 HTML+TIME参考 网页矢量图形标记语言 HTML 应用程序 技巧 语言代码 颜色表 --------------------------------------------------------------------------------

    DHTML HTML 中文文档

    - **Canvas** 和 **SVG**:提供图形绘制和矢量图像的能力。 **3. CSS(层叠样式表)** CSS负责网页的样式和布局,它与HTML分离,使页面设计更加灵活。关键概念包括: - **选择器**:如类选择器(`.class`)、ID...

    DHTML/HTML/CSS网页制作完全手册

    至于“VML网页矢量图”,Vector Markup Language(VML)是一种用于在网页上显示矢量图形的标准,特别是在Internet Explorer较旧版本中广泛使用。尽管SVG(Scalable Vector Graphics)现在更被推崇,但理解VML对于...

    DHTML手册(js+Css)CHM

    资源中的那个无法下载,在网上找了一个,传上来,分享! 通过下列链接访问参考资料,可帮助你创建引人注目的 Web...可视化滤镜和切换参考 HTML+TIME参考 网页矢量图形标记语言 HTML 应用程序 技巧 语言代码 颜色表

Global site tag (gtag.js) - Google Analytics