 |
||||||
|
Great for Creating Games:
JavaScript Vector-draw Library
How many times you wished if you could only draw an arrow on your web page? Or few lines here and there? Unfortunately, HTML offers nothing in this department, and using images takes bandwidth and slows down the loading of your pages.
Courtesy of Walter Zorn, you can now use JavaScript to draw objects on your web pages. Fire up your JavaScript Editor, follow the instructions below and you will be drawing shapes on your web pages in no time.
This library is a great choice for creating games, or just to spruce up your web pages.
Click here to download the JavaScript vector-draw library (6KB) under LGPL license
Use the library to draw:
Lines (see example above)
Note: The library is cross-browser and fast. However, due to the limitations of HTML, drawing on your web pages using JavaScript is slower compared to drawing in stand-alone applications. If you want to see more detailed explanations on the workings of the library, visit Walter Zorn's website at www.walterzorn.com.
How to use the library in 3 quick steps
<script type="text/javascript" src="wz_jsgraphics.js"></script>
<div id="Canvas" style="position:relative;height:5px;width:5px;"></div>
// Call jsGraphics() with no parameters if drawing within the entire document
var jg = new jsGraphics("Canvas"); // Use the "Canvas" div for drawing
jg.setColor("maroon");
jg.fillEllipse(450, -5, 40, 70);
jg.setStroke(1);
jg.setColor("#ff6666");
jg.drawPolyline(new Array(90, 640, 90), new Array(0, 25, 90));
jg.setColor("green");
jg.drawRect(100,40,200,18);
jg.setColor("blue");
jg.setStroke(Stroke.DOTTED);
jg.drawRect(-20,0,32,50);
jg.drawEllipse(250,10,100,100);
jg.paint();
Functions
clear();
Purpose: Clears the content between the <div>..</div> tags used for drawing.
Example:
jg.clear();
drawEllipse(x, y, width, height);
Purpose: Draws an ellipse.
Example:
jg.drawEllipseEllipse(0, 0, 100, 200);
drawImage("URL", x, y, width, height, eventHandler);
Purpose: Displays an image at the given location, with the optional event handler.
Examples:
drawImage("MyImage.gif", 10, 10, 100, 200);
drawImage("MyImage.gif", 10, 10, 100, 200, 'onmouseover="DoSomething()"');
drawLine(x1, y1, x2, y2);
Purpose: Draws the line from the point x1, y1 to x2, y2.
Example:
jg.drawLine(0, 0, 100, 200);
drawPolyline(Xpoints, Ypoints);
Purpose: Given an array of points, draws multiple connected lines.
Example:
jg.drawPolyline(new Array(0,10,200), new Array(0,10,100));
drawRect(x, y, width, height);
Purpose: Draws a rectangle.
Example:
jg.drawRect(0,0, 100,200);
drawPolygon(xPoints, yPoints);
Purpose: Given an array of points, draws a polygon.
Example:
jg.drawPolygon(new Array(0,10,200), new Array(0,10,100));
drawString("text", x, y);
Purpose: Displays text at the given location.
Example:
jg.drawString("Hello World!", 10, 10);
drawStringRect("text", x, y, width, "justification");
Purpose: Displays justified text of the specified width. The text justification can be:
Example:
jg.drawString("Hello World!", 10, 10, 500, "center");
fillEllipse(x, y, width, height);
Purpose: Draws a filled ellipse.
Example:
jg.fillEllipse(0,0, 100, 200);
fillPolygon(Xpoints, Ypoints);
Purpose: Draws a filled polygon.
Example:
jg.fillPolygon(new Array(0,10,200), new Array(0,10,100));
fillRect(x, y, width, height);
Purpose: Draws a filled rectangle.
Example:
jg.fillRect(0,0, 100, 200);
paint();
Purpose: To optimize performance, library functions generate the drawing code internally. The paint() function must be called to do the actual drawing.
Example:
... A set of calls to drawing functions here ...
jg.paint();
setColor("#HexColor");
Purpose: Specifies the color to be used by subsequent drawing functions.
Examples:
jg.setColor("#ff6666");
jg.setColor("blue");
setFont("font-family", "size+unit", fontStyle);
Purpose: Specifies the font properties to be used by the drawString(); function. Available font styles are:
Example:
jg.setFont("Times New Roman", "10px", Font.PLAIN);
setPrintable(boolEnable);
Purpose: Enables printing of JavaScript-generated drawings. Note that there is a performance cost: the rendering slows down.
Example:
jg.setPrintable(true);
setStroke(thickness);
Purpose: Specifies the pen thickness to be used by subsequent drawing functions.
Example:
jg.setStroke(3);
...
