<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>DHTML: Draw Line, Ellipse, Oval, Circle, Polyline, Polygon, Triangle with JavaScript</title>
<link rel="stylesheet" type="text/css" href="../newwalterzorn.css">
<script type="text/javascript" src="../walterzorn.js"></script>
<script type="text/javascript" src="../scripts/wz_jsgraphics.js"></script>
</head>
<body bgcolor="#ffffff">
<a name="top"> </a>
<a href="http://www.walterzorn.de/jsgraphics/jsgraphics.htm" target="_top"><img src="../images/germany.gif" align="center" border="0" alt="German version" width="22" height="15"></a> <small><a href="http://www.walterzorn.de/jsgraphics/jsgraphics.htm" target="_top">German version</a></small>
<center>
<table>
<tr>
<td align="center"><a href="../index.htm"><img name="logo" border="0" src="../images/logo.gif" alt="home" width="278" height="30"></a></td>
</tr>
</table>
<table cellspacing="12">
<tr>
<td><img src="../images/transparentpixel.gif" alt="DHTML, JavaScript: Draw Ellipse, Oval, Circle, Polygon, Triangle, Rectangle, Line, Polyline" width="1" height="1"><a href="../index.htm">Home</a></td>
<td><a href="../dragdrop/dragdrop_e.htm">DHTML-Drag&Drop-Library</a></td>
<td><a href="../tooltip/tooltip_e.htm">Tooltips</a></td>
<td><a href="../grapher/grapher_e.htm">Function-Grapher</a></td>
</tr>
</table>
</center>
<div id="main" style="position:relative;height:230px;width:100%;"><table width="100%"><tr><td height="230"></td></tr></table></div>
<table>
<tr>
<td width="80"><img src="../images/transparentpixel.gif" alt="" width="80" height="1"></td>
<td>
<table>
<tr>
<td>
<b><big>DHTML, JavaScript
<br>Draw Line, Circle, Ellipse (Oval), Polyline, Polygon, Rectangle.</big>
<br>High Performance JavaScript Vector Graphics Library.</b><br>
<small>Developed by Walter Zorn</small><br> <br>
</td>
<td rowspan="4" valign="top">
<table cellpadding="0" cellspacing="3">
<tr>
<td width="1" bgcolor="#000099"><img src="../images/transparentpixel.gif" width="1" height="1" alt="DHTML, JavaScript: Draw Ellipses, Ovals, Circles, Polygons, Triangles, Rectangles, Lines, Polylines"></td>
<td>
<small>
<br>
<a href="#performance">Performance?</a>
<br> <br>
<a href="#browser">Cross Browser?</a>
<br> <br>
<a href="#docu">Documentation</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
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. <a href="#docu">Documentation</a>.
Another goal during development of this JavaScript Draw Shapes Vector Graphics Library was to achieve optimized <a href="#performance">performance</a> and cleanly arranged pixel stair-step patterns (pixel-optimization).
</td>
</tr>
<tr>
<td>
<big> <br> <br><b>Try it out:</b></big>
</td>
</tr>
<tr>
<td>
<table border="0" bgcolor="#000099" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="1" width="100%">
<tr>
<td bgcolor="white">
<form action="">
<table cellspacing="0">
<tr align="right">
<td><input style="width:100%" type="button" value="drawLine()" οnclick="DRAW(this.value)"></td>
<td>x1<input name="dl_x1" type="text" size="5" maxlength="4" value="50"> </td>
<td>y1<input name="dl_y1" type="text" size="5" maxlength="4" value="-330"> </td>
<td>x2<input name="dl_x2" type="text" size="5" maxlength="4" value="500"> </td>
<td>y2<input name="dl_y2" type="text" size="5" maxlength="4" value="800"> </td>
<td><br></td>
<td><br></td>
</tr>
<tr align="right">
<td><input style="width:100%" type="button" value="drawRect()" οnclick="DRAW(this.value)"></td>
<td>x<input name="dr_x" type="text" size="5" maxlength="4" value="130"> </td>
<td>y<input name="dr_y" type="text" size="5" maxlength="4" value="20"> </td>
<td>w<input name="dr_w" type="text" size="5" maxlength="4" value="350"> </td>
<td>h<input name="dr_h" type="text" size="5" maxlength="4" value="60"> </td>
<td><br></td>
<td><br></td>
</tr>
<tr align="right">
<td><input style="width:100%" type="button" value="fillRect()" οnclick="DRAW(this.value)"></td>
<td>x<input name="fr_x" type="text" size="5" maxlength="4" value="-70"> </td>
<td>y<input name="fr_y" type="text" size="5" maxlength="4" value="130"> </td>
<td>w<input name="fr_w" type="text" size="5" maxlength="4" value="160"> </td>
<td>h<input name="fr_h" type="text" size="5" maxlength="4" value="100"> </td>
<td><br></td>
<td><br></td>
</tr>
<tr align="left">
<td align="right"><input type="button" value="fillPolygon()" οnclick="DRAW(this.value)"></td>
<td colspan="6">
x<input name="fp_x" type="text" size="25" value="80,126,-30,-60"> y<input name="fp_y" type="text" size="25" value="0,130,40,100">
</td>
</tr>
<tr align="right">
<td><input style="width:100%" type="button" value="drawEllipse()" οnclick="DRAW(this.value)"></td>
<td>x<input name="do_x" type="text" size="5" maxlength="4" value="320"> </td>
<td>y<input name="do_y" type="text" size="5" maxlength="4" value="-20"> </td>
<td>w<input name="do_w" type="text" size="5" maxlength="3" value="250"> </td>
<td>h<input name="do_h" type="text" size="5" maxlength="4" value="140"> </td>
<td><br></td>
<td><br></td>
</tr>
<tr align="right">
<td><input style="width:100%" type="button" value="fillEllipse()" οnclick="DRAW(this.value)"></td>
<td>x<input name="fo_x" type="text" size="5" maxlength="4" value="75"> </td>
<td>y<input name="fo_y" type="text" size="5" maxlength="4" value="140"> </td>
<td>w<input name="fo_w" type="text" size="5" maxlength="3" value="240"> </td>
<td>h<input name="fo_h" type="text" size="5" maxlength="4" value="400"> </td>
<td><br></td>
<td><br></td>
</tr>
<tr align="right">
<td><input style="width:100%" type="button" value="fillArc()" οnclick="DRAW(this.value)"></td>
<td>x<input name="fa_x" type="text" size="5" maxlength="4" value="350"> </td>
<td>y<input name="fa_y" type="text" size="5" maxlength="4" value="140"> </td>
<td>w<input name="fa_w" type="text" size="5" maxlength="4" value="240"> </td>
<td>h<input name="fa_h" type="text" size="5" maxlength="4" value="400"> </td>
<td>arc begin<input name="fa_angA" type="text" size="5" maxlength="6" value="25">°</td>
<td>arc end<input name="fa_angZ" type="text" size="5" maxlength="6" value="290">°</td>
</tr>
<tr>
<td colspan="7">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
setColor("#<input name="Color" type="text" size="7" maxlength="6" value="00aaaa">")
</td>
<td align="center">
setStroke(<input name="Stroke" type="text" size="3" maxlength="2" value="4">)
</td>
<td align="right">
setStroke(Stroke.DOTTED<input name="Dotted" type="checkbox">)
</td>
</tr>
</table>
<input type="button" style="font-weight:bold;width:290px;" value="clear() this test area" οnclick=";if(jg2)jg2.clear();">
</td>
</tr>
<tr>
<td colspan="7" height="250">
<div id="dt" style="position:relative;left:-80px;top:10px;height:1px;"></div>
<div id="test" style="position:relative;left:0px;top:0px;width:400px;height:250px;z-index:2;overflow:visible;"><center><small>Test Canvas</small></center></div>
</td>
</tr>
</table>
</form>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table>
<tr>
<td width="80"><img src="../images/transparentpixel.gif" alt="" width="80" height="1"></td>
<td>
<table>
<tr>
<td>
Here's an example of <a href="demos/animarc.htm">how to animate (rotate) a vectorgraphic</a>.
<br> <br>
Or see <a href="../dragdrop/demos/drawonimg.htm">how to draw onto an image</a>, using the image itself as canvas
(this example uses my <a href="../dragdrop/dragdrop_e.htm">DHTML-Drag&Drop-Library</a>).
</td>
<td><br></td>
</tr>
<tr>
<td><b><big> <br> <br><a name="performance"> </a> <br>Performance</big></b></td>
<td rowspan="4" valign="top">
<table cellpadding="0" cellspacing="3">
<tr>
<td width="1" bgcolor="#000099"><img src="../images/transparentpixel.gif" width="1" height="1" alt="DHTML, JavaScript: Draw Ellipse, Oval, Circle, Polygon, Triangle, Rectangle, Line, Polyline"></td>
<td>
<small>
<br>
<a href="#top">Top of Page</a>
<br> <br>
<a href="#performance">Performance?</a>
<br> <br>
<a href="#browser">Cross Browser?</a>
<br> <br>
<a href="#docu">Documentation</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
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 had to lug its complete browser-internal object overhead.
<script type="text/javascript">
<!--
function drwRcEx(hnd, left, top, width, height, crFg, crBg)
{
hnd.setColor(crBg);
hnd.fillRect(left, top, width, height);
hnd.setColor(crFg);
hnd.drawRect(left, top, width, height);
}
function drwPxOv(hnd, left, top, width, height, fact, crFg, crBg, 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) drwRcEx(hnd, cx+fact*x, cy-fact*y, fact, fact, crFg, crBg);
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)
drwRcEx(hnd, cx+fact*ox, cy-fact*oy, fact*(x-ox), fact*(oy-y), crFg, crBg);
ox = x;
oy = y;
}
else
{
st -= (a2<<1)*(y-1);
tt -= a2*((y<<1)-3);
y--;
}
if(bad)
drwRcEx(hnd, cx+fact*x, cy-fact*y, fact, fact, crFg, crBg);
}
while (y>0);
if (!bad) drwRcEx(hnd, cx+fact*ox, cy-fact*oy, fact*(a-ox+1), fact*(oy+1), crFg, crBg);
}
/// 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("#ffbbdd");
jg.fillRect(0, 25, 30, 10);
jg.fillRect(20, 35, 30, 10);
jg.fillRect(40, 45, 30, 10);
jg.fillRect(60, 55, 10, 20);
jg.fillRect(70, 65, 10, 30);
jg.fillRect(80, 85, 10, 30);
jg.setColor("#cc0000");
jg.drawString("worst", 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("bad", 130, 129);
drwPxOv(jg, 30, 25, 16, 16, 10, "#006600", "#cceecc", true);
jg.setColor("#0000cc");
jg.drawString("optimal<br>wz_jsgraphics.js", 240, 119);
drwPxOv(jg, 150, 25, 16, 16, 10, "#000099", "#ccccff");
jg.htm += '<\/div><\/td><\/tr><\/table>';
jg.paint();
//-->
</script>
<br> <br>
To minimize the amount of such 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 generated 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 <b><a href="#notes">[1]</a></b> from one per pixel to one per pixel stair-step.
For filled shapes, the advantage of the wz_jsgraphics.js approach is even bigger, as illustrated by the varicoloured filled ellipse below these paragraphs - imagine, by comparison, an ellipse composed of 1*1 pixel DIVs...
<br> <br>
<b>However, don't compare the performance with Java or stand-alone applications!</b>
<br>
Making a browser create DIV elements is of course much slower than just colouring pixels <b><a href="#notes">[2]</a></b>.
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.
<br> <br>
<b>Alternative to SVG or <canvas> tag?</b>
<br>
Both techniques are presently not natively supported by IE.
IE's proprietary VML, on the other hand, is not supported by the other browsers.
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, as this vectorgraphics library allows graphics to overflow the borders of their "canvases", it can render to almost anywhere on a page.
<br clear="all">
<img src="../images/jsgraphics/filloval.gif" width="100" height="148" alt="JavaScript Vector Graphics Library: fillEllipse()">
</td>
</tr>
<tr>
<td>
<big> <br> <br><a name="browser"> </a> <br> <br><b>Cross Browser Functionality?</b></big>
</td>
</tr>
<tr>
<td>
Linux:
<br>Browsers with Gecko-Engine (Mozilla, Netscape 6+, Galeon), Konqueror, Opera 5, 6 and 7+.
<br> <br>
Windows:
<br>Gecko-Browsers, IE 4, 5 and 6, Opera 5, 6 and 7+.
<br> <br>
Mac:
<br>
Safari, Gecko-Browsers, Opera, partially IE.
<br> <br>
The functionality "Draw into html elements even after the page has fully loaded" isn't available for Opera prior to version 7,
whereas "Draw into the document while the page is parsed" is cross-browser capable.
</td>
</tr>
<tr>
<td>
<big> <br> <br><a name="docu"> </a> <br> <br> <br><b>Documentation: How to Use the JavaScript Graphics Library</b></big>
</td>
<td><br></td>
</tr>
<tr>
<td>
<b><big>1.</big> Download the Library</b>
<br>
<a href="#download">Download</a> the JavaScript Vector Graphics Library.
<strong>Note: Please use the downloaded file only</strong>, do not directly link wz_jsgraphics.js from my site into your site.
</td>
</tr>
<tr>
<td>
<b><big> <br>2.</big> Include the Library</b>
<br>
Un-zipp the file into the same directory as your html file.
Insert the following code into the head-section of the html file, between <head> and </head> -
if you'd like to have the library in a different directory, adapt the path src="wz_jsgraphics.js":<br>
</td>
<td><br></td>
</tr>
<tr>
<td>
<table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td bgcolor="#eeeeee">
<tt><font size="2" style="font-size:12px;">
<script type="text/javascript" src="wz_jsgraphics.js"></script><br>
</font></tt>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td><br></td>
</tr>
<tr>
<td>
<b> <br><big>3.</big> HTML: <div> Elements As Canvases</b>
<br>
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:
<br>
<div id="myCanvas" style="position:relative;height:250px;width:100%;"></div><br>
...<br>
<div id="anotherCanvas" style="position:relative;height:100px;width:300px;"></div>
</td>
<td><br></td>
</tr>
<tr>
<td>
<big> <br> <br> <br> <br> <br> <br><b>How to Draw Shapes</b></big>
</td>
<td rowspan="4" valign="top">
<table cellpadding="0" cellspacing="3">
<tr>
<td width="1" bgcolor="#000099"><img src="../images/transparentpixel.gif" width="1" height="1" alt="DHTML, JavaScript: Draw Ellipses, Ovals, Circles, Polygons, Triangles, Rectangles, Lines, Polylines"></td>
<td>
<small>
<br>
<a href="#top">Top of Page</a>
<br> <br>
<a href="#performance">Performance?</a>
<br> <br>
<a href="#browser">Cross Browser?</a>
<br> <br>
<a href="#docu">Documentation</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<b><big>1.</big> Create a jsGraphics Object</b>
<br>
<b>a) Draw into DIV elements even after the page has fully loaded:</b>
<br>
(This mode doesn't work in Opera 5 and 6.)
<br>
See the example below for how to create a jsGraphics object for a certain DIV element intended to serve as canvas.
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 constructor function <tt>new jsGraphics()</tt> requires as parameter either the ID of the canvas DIV in quotation marks, or a direct reference to the DIV:<br>
</td>
</tr>
<tr>
<td>
<table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td bgcolor="#eeeeee">
<tt><font size="2" style="font-size:12px;">
<script type="text/javascript"><br>
<!--<br>
var jg = new jsGraphics("myCanvas");<br>
//--><br>
</script>
</font></tt>
<br>
<br>
<b>or</b>
<br>
<br>
<tt><font size="2" style="font-size:12px;">
<script type="text/javascript"><br>
<!--<br>
var cnv = document.getElementById("myCanvas");<br>
var jg = new jsGraphics(cnv);<br>
//--><br>
</script>
</font></tt>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
If there are multiple separate DIV elements, each requires its own jsGraphics instance:
</td>
</tr>
<tr>
<td>
<table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td bgcolor="#eeeeee">
<tt><font size="2" style="font-size:12px;">
<script type="text/javascript"><br>
<!--<br>
<br>
var jg = new jsGraphics("myCanvas");<br>
var jg2 = new jsGraphics("anotherCanvas");<br>
<br>
//--><br>
</script>
</font></tt>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td><br></td>
</tr>
<tr>
<td>
<br> <br>
<b>b) Draw directly into the document while the page is parsed:</b>
<br>
Works even in Opera 5/6.
Instead of the ID of a DIV element, nothing (or the value null) must be passed to the constructor function:
</td>
<td><br></td>
</tr>
<tr>
<td>
<table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td bgcolor="#eeeeee">
<tt><font size="2" style="font-size:12px;">
<script type="text/javascript"><br>
<!--<br>
<br>
var jg_doc = new jsGraphics();<br>
<br>
//--><br>
</script>
</font></tt>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td><br></td>
</tr>
<tr>
<td>
Instead of jg, jg2 or jg_doc you may choose any other variable name, provided it follows the rules for variable names in JavaScript.
</td>
<td><br></td>
</tr>
<tr>
<td>
<b> <br> <br> <br><big>2.</big> Functions to Draw Shapes</b>
<br>
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:
</td>
<td><br></td>
</tr>
<tr>
<td>
<table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="1" cellspacing="1" width="100%">
<tr>
<td bgcolor="#eeeeee">
<tt><font size="2" style="font-size:12px;">
<script type="text/javascript"><br>
<!--<br>
function myDrawFunction()<br>
{<br>
jg_doc.setColor("#00ff00"); <i><font color="#999999">// green</font></i><br>
jg_doc.fillEllipse(100, 200, 100, 180); <i><font color="#999999">// co-ordinates related to the document</font></i><br>
jg_doc.setColor("maroon");<br>
jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));<br>
jg_doc.paint(); <i><font color="#999999">// draws, in this case, directly into the document</font></i><br>
<br>
jg.setColor("#ff0000"); <i><font color="#999999">// red</font></i><br>
jg.drawLine(10, 113, 220, 55); <i><font color="#999999">// co-ordinates related to "myCanvas"</font></i><br>
jg.setColor("#0000ff"); <i><font color="#999999">// blue</font></i><br>
jg.fillRect(110, 120, 30, 60);<br>
jg.paint();<br>
<br>
jg2.setColor("#0000ff"); <i><font color="#999999">// blue</font></i><br>
jg2.drawEllipse(10, 50, 30, 100);<br>
jg2.drawRect(400, 10, 100, 50);<br>
jg2.paint();<br>
}<br>
<br>
var jg_doc = new jsGraphics(); <i><font color="#999999">// draw directly into document</font></i><br>
var jg = new jsGraphics("myCanvas");<br>
var jg2 = new jsGraphics("anotherCanvas");<br>
<br>
myDrawFunction();<br>
<br>
//--><br>
</script>
</font></tt>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td><br></td>
</tr>
<tr>
<td>
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.
</td>
<td><br></td>
</tr>
</table>
</td>
</tr>
</table>
<table bgcolor="#000099" border="0" cellpadding="0" cellspacing="0" style="margin:10px;">
<tr>
<td>
<table border="0" cellspacing="1" cellpadding="8">
<tr bgcolor="#eeeeee">
<td><b>Name of function (method)</b></td>
<td><b>Code example</b> as to be used with the above example object 'jg' (which is the context of the DIV called "myCanvas")</td>
</tr>
<tr bgcolor="white">
<td colspan="2">
<b>General Notes</b>
<br> <br>
<b>1.)</b> Numbers passed to these functions must always be <b>integer numbers</b>, 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 the predefined <tt>parseInt()</tt> or <tt>Math.round()</tt> JavaScript functions to convert such values to integers.
Example:
<br>
<code>jg.setStroke(parseInt(document.MyForm.Linewidth.value));</code>
<br> <br>
<b>2.)</b> 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.
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>setColor(</b>"#HexColor"<b>);</b></code>
<br> <br>
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.
</td>
<td><code>jg.setColor("#ff0000");</code><br> <br>or with identical result<br> <br><code>jg.setColor("red");</code></td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>setStroke(</b>Number<b>);</b></code>
<br> <br>
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 1 px, as long as .setStroke() has not yet been invoked.
<br> <br>
To create dotted lines, <tt>setStroke()</tt> requires the constant <tt>Stroke.DOTTED</tt> as argument.
Width of dotted lines is always 1 pixel.
</td>
<td>
<code>jg.setStroke(3);</code>
<br> <br>
or
<br> <br>
<code>jg.setStroke(Stroke.DOTTED);</code>
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>drawLine(</b>X1, Y1, X2, Y2<b>);</b></code>
<br>
<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 1 px or the value most recently specified by <b><tt>.setStroke()</tt></b>.
</td>
<td><code>jg.drawLine(20,50,453,40);</code></td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>drawPolyline(</b>Xpoints, Ypoints<b>);</b></code>
<br>
<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:
<br>
<code>var Xpoints = new Array(x1,x2,x3,x4,x5);<br>var YPoints = new Array(y1,y2,y3,y4,y5);</code>
<br>
Instead of Xpoints and Ypoints you may of course use other names provided these follow the rules for JavaScript variable names.
<br> <br>
Line thickness is either 1px or the value most recently specified by <b><tt>.setStroke()</tt></b>.
</td>
<td><code>var Xpoints = new Array(10,85,93,60);<br>var YPoints = new Array(50,10,105,87);<br>jg.drawPolyline(Xpoints,Ypoints);</code></td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>drawRect(</b>X, Y, width, height<b>);</b></code>
<br>
<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 <b><tt>.setStroke()</tt></b>.
</td>
<td><code>jg.drawRect(20,50,70,140);</code></td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>fillRect(</b>X, Y, width, height<b>);</b></code>
<br>
<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.
</td>
<td><code>jg.fillRect(20,50,453,40);</code></td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>drawPolygon(</b>Xpoints, Ypoints<b>);</b></code>
<br>
<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:
<br>
<code>var Xpoints = new Array(x1,x2,x3,x4,x5);<br>var Ypoints = new Array(y1,y2,y3,y4,y5);</code>
<br>The polygon will be automatically closed if the first and last points are not identical.
<br> <br>
Line thickness is either 1px or the value most recently specified by <b><tt>.setStroke()</tt></b>.
</td>
<td>
<code>var Xpoints = new Array(10,85,93,60);<br>var Ypoints = new Array(50,10,105,87);<br>jg.drawPolygon(Xpoints, Ypoints);</code><br> <br>
Instead of Xpoints and Ypoints you may of course use other names provided these follow the rules for variable names.
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>fillPolygon(</b>Xpoints, Ypoints<b>);</b></code>
<br>
<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()
</td>
<td>
<code>jg.fillPolygon(new Array(10,85,93,60),</code> <code>new Array(50,10,105,87));</code>
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>drawEllipse(</b>X, Y, width, height<b>);</b></code>
<br>
<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 <b><tt>.setStroke()</tt></b>.
</td>
<td>
<code>jg.drawEllipse(20,50,70,140);</code>
<br>
or
<br>
<code>jg.drawOval(20,50,70,140);</code>
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>fillEllipse(</b>X, Y, width, height<b>);</b></code>
<br>
<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.
</td>
<td>
<code>jg.fillEllipse(20,50,71,141);</code>
<br>
or
<br>
<code>jg.fillOval(20,50,71,141);</code>
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>fillArc(</b>X, Y, width, height, start-angle, end-angle<b>);</b></code>
<br>
<script type="text/javascript">
<!--
jg.htm += '<div style="position:relative;width:50px;height:13px;"><table cellpadding="0" cellspacing="0"><tr><td>';
jg.setColor("#ffbb00");
jg.fillArc(0, -1, 41, 13, 270, 220);
jg.htm += '<\/td><\/tr><\/table><\/div>';
jg.paint();
//-->
</script>
Fills a pie section of an ellipse.
Start-angle and end-angle may be integer numbers or decimalpoint values.
Like with the other ...Ellipse() functions, X and Y specify the left-top corner of the bounding rectangle.
</td>
<td>
<code>jg.fillArc(20,20,41,12,270.0,220.0);</code>
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>setFont(</b>"font-family", "size+unit", Style<b>);</b></code>
<br> <br>
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.
<br> <br>
Available font styles:<br>
Font.PLAIN for normal style (not bold, not italic)<br>
Font.BOLD for bold fonts<br>
Font.ITALIC for italics<br>
Font.ITALIC_BOLD or Font.BOLD_ITALIC to combine the latters.
</td>
<td>
Example: see <code>drawString()</code> below
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>drawString(</b>"Text", X, Y<b>);</b></code>
<br>
<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>
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, "Some Text<br>more Text" would indeed create a line break.
</td>
<td>
<code>jg.setFont("arial","15px",Font.ITALIC_BOLD);</code>
<br>
<code>jg.drawString("Some Text",20,50);</code>
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>drawStringRect(</b>"Text", X, Y, Width, Alignment<b>);</b></code>
<br>
<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 "right")", 4, 4, 292, "right");
jg.htm += '<\/td><\/tr><\/table><\/div>';
jg.paint();
//-->
</script>
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".
</td>
<td>
<code>jg.setFont("verdana","11px",Font.BOLD);</code>
<br>
<code>jg.drawStringRect("Text",20,50,300,"right");</code>
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>drawImage(</b>"src", X, Y, width, height<b>);</b></code>
<br>
<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 at the specified location.
The "src" parameter specifies the file path.
The width and height parameters are optional (may be 0, null or omitted, in which case the image is displayed in its default size),
but provide the option to stretch the image (almost) arbitrarily.
<br> <br>
Optionally, drawImage() accepts a fifth parameter which you can use to insert an eventhandler into the generated image tag.
Example:
<br>
<code>jg.drawImage('anImg.jpg',8,5,95,70,'οnmοuseοver="YourFunc()"');</code>
<br> <br>
</td>
<td>
<code>jg.drawImage("friendlyDog.jpg",</code> <code>20,50,100,150);</code>
</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>paint();</b></code>
<br> <br>
Must be envoked explicitly to draw the internally-generated graphics into the html page.
To optimize performance it's recommended to restrain from calling <tt>paint()</tt> in unnecessarily short intervals.
<br> <br>Avoid something like:
<br>
<tt>jg.drawEllipse(0, 0, 100, 100);
<br>
jg.paint();
<br>
jg.drawLine(200, 10, 400, 40);
<br>
jg.paint();
<br>...</tt>
<br> <br>
The following will be faster:
<br>
<tt>jg.drawEllipse(0, 0, 100, 100);
<br>
jg.drawLine(200, 10, 400, 40);
<br>
/*...further drawing methods... */
<br>
jg.paint();</tt>
</td>
<td><code>jg.paint();</code></td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>clear();</b></code>
<br> <br>
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.
</td>
<td><code>jg.clear();</code><br> <br>Any stuff the script has drawn to "myCanvas" is deleted (assuming that "myCanvas" is the DIV for which 'jg' has been created).</td>
</tr>
<tr bgcolor="white" valign="top">
<td>
<code><b>setPrintable(</b>true<b>);</b></code>
<br> <br>
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/Netscape 6+ and IE).
However, at the price of a slightly decreased rendering speed (about 10% to 25% slower).
</td>
<td>
<code>jg.setPrintable(false);</code><br> <br>
The parameter false switches wz_jsgraphics.js back to non-printable mode.
The benefit from this, however, will be re-optimized rendering performance.
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%">
<tr>
<td width="80"><img src="../images/transparentpixel.gif" alt="" width="80" height="1"></td>
<td>
<table width="100%">
<tr>
<td>
<b><a name="download"> </a> <br> <br> <br> <br><big>Download</big></b>
</td>
<td rowspan="4" align="right" valign="top">
<table cellpadding="0" cellspacing="3">
<tr>
<td width="1" bgcolor="#000099"><img src="../images/transparentpixel.gif" width="1" height="1" alt=""></td>
<td>
<small>
<br>
<a href="#top">Top of Page</a>
<br> <br>
<a href="#performance">Performance?</a>
<br> <br>
<a href="#browser">Cross Browser?</a>
<br> <br>
<a href="#docu">Documentation</a>
<br> <br>
<a href="#download">Download</a>
<br>
</small>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
wz_jsgraphics.js 3.05, published under the <b>LGPL</b>:<br>
<a href="../scripts/wz_jsgraphics.zip">wz_jsgraphics.zip</a> (7 KB)
<br> <br><a href="history_e.htm">History of Updates</a> (it's recommended to read this, especially if you aren't sure about the benefits from an update :-) ).
</td>
</tr>
<tr>
<td>
<br> <br> <br> <br>
<b><big>Donation</big></b>
<br>
Financial support for the very numerous hours of development and for the costs of this website is of course welcome.<br>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif" border="0" align="center" name="submit" alt="Zahlen Sie mit PayPal - schnell, kostenlos und sicher!">
<img alt="" border="0" src="https://www.paypal.com/de_DE/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
(Donation - €)
</form>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif" border="0" align="center" name="submit" alt="Zahlen Sie mit PayPal - schnell, kostenlos und sicher!">
<img alt="" border="0" src="https://www.paypal.com/de_DE/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
(Donation - US-Dollar)
</form>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="image" src="https://www.paypal.com/en_US/i/btn/x-click-but04.gif" border="0" align="center" name="submit" alt="Zahlen Sie mit PayPal - schnell, kostenlos und sicher!">
<img alt="" border="0" src="https://www.paypal.com/de_DE/i/scr/pixel.gif" width="1" height="1">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
(Donation - Australian Dollar)
</form>
</td>
</tr>
<tr>
<td>
<b><a name="notes"> </a><br> <br> <br> <br> <br><big>Notes</big></b>
</td>
</tr>
<tr>
<td>
<b>[1]</b>
<br>
If we assume the probability of line angles on the screen to be equally distributed over 360°:
<br>
Then for 1 px wide lines the number of layers is averagely
<b>sin(45°) / (1 - sin(45°)) = 2.41</b>
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.
<br>
<a href="#performance">Back</a>
<br> <br>
<b>[2]</b>
<br>
Something like a really lightweight <pixel color="#ff9900" left="127" top="63"> tag would be nice.
<br>
<a href="#performance">Back</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr width="95%" size="1" noshade>
<table cellpadding="20">
<tr>
<td>
<small><a href="javascript:void(0)" οnmοuseοver="this.href=Ml()">Walter Zorn</a>, Munich</small>
<br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br><img alt="" src="http://cgicounter.puretec.de/cgi-bin/cnt?clsid=6618c08714b49c97228db9da7cdaa38d1"> <small>visitors on http://www.walterzorn.com/ since 1. 1. 2009</small>
</td>
</tr>
</table>
<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.οndblclick=ZOOM;
function DRAW(shape)
{
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=="fillArc()")
jg2.fillArc(parseInt(f.fa_x.value), parseInt(f.fa_y.value), parseInt(f.fa_w.value), parseInt(f.fa_h.value), parseFloat(f.fa_angA.value.replace(/,/, ".")), parseFloat(f.fa_angZ.value.replace(/,/, ".")));
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.drawEllipse(16, 240+dy, 59, 130);
jg.setFont("arial,helvetica,sans-serif", "11px", Font.PLAIN);
jg.drawString("<nobr>.drawEllipse( )<\/nobr>",35, 180+dy);
jg.drawString(".fillPolygon( )", 360, 66+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.setColor("#008800");
jg.drawOval((250+wc+300)>>1, 4+dy, 64, 64);
jg.drawString("These are not image files.<br>Shapes & text have been dynamically drawn with wz_jsgraphics.js.", ((wc+280)>>1)-100, 190+dy);
jg.setStroke(2);
jg.setColor("#ff99b6");
jg.drawLine(120, -60+dy, 265, 150+dy);
jg.setColor("#ff0080");
jg.setStroke(1);
jg.drawString("<nobr>.drawLine( )<\/nobr>", 190, 145+dy);
var polylx=new Array(420, ((wc+280)>>1)+240, ((wc+280)>>1)+120, (wc<<1)-100);
var polyly=new Array(160+dy, 112+dy, 350+dy, 450+dy);
jg.drawPolyline(polylx, polyly);
jg.drawString(".drawPolyline( )", ((wc+280)>>1)+126, 155+dy);
jg.setColor("#ffe600");
jg.fillPolygon(new Array(383, 390, 397, 420, 397, 390, 383, 360), new Array(23+dy, 0+dy, 23+dy, 30+dy, 37+dy, 60+dy, 37+dy, 30+dy));
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( )", 256, 30+dy);
jg.setColor("#aabbff");
jg.setStroke(5);
jg.drawOval(300, 110+dy, 80, 50);
// Smiley
jg.fillOval(wc+292, 36+dy, 15, 15);
jg.setColor("#990099");
jg.setStroke(Stroke.DOTTED);
jg.drawRect(wc+280, dy, 40, 50);
jg.drawString("<nobr>.drawRect( )<\/nobr>", wc+210, 20+dy);
jg.setStroke(1);
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.setColor("#0000cc");
jg.drawString(".fillEllipse( )", wc+214, 36+dy);
// Pie
jg.setColor("#0000ff");
jg.drawString(".fillArc( )", wc+240, 120+dy);
jg.setColor("#999999");
jg.fillOval(wc+210, 150+dy, 120, 80);
jg.setColor("#ff8080");
jg.fillArc(wc+210, 140+dy, 120, 80, 330, 40);
jg.setColor("#8080ff");
jg.fillArc(wc+210, 140+dy, 120, 80, 40, 140);
jg.setColor("#ff80ff");
jg.fillArc(wc+210, 140+dy, 120, 80, 140, 180);
jg.setColor("#80bb80");
jg.fillArc(wc+210, 140+dy, 120, 80, 180, 280);
jg.setColor("#ffcc66");
jg.fillArc(wc+210, 140+dy, 120, 80, 280, 330);
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-->
</body>
</html>
扫一扫
296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
