Tuesday, March 24, 2009

How to draw lines using java script?

I have goggled about this and found an excellent third party JavaScript file which is when referred helps to create a line or poly line (continuous lines with start and end point) very easily.
Please click on this link to down load Third party JavaScript file. download

Please click on this link to explore the members this third party javascript file has
wz_jsgraphics members


I would like to write an HTML file that draws a line on button click using above down loaded JavaScript file.
If you would like to copy the below HTML page to run, Make sure that the third party graphics JavaScript file is downloaded into your machine and placed in this application folder where you are creating this HTML page.
Down third party JavaScript file by clicking here download

Html File :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" >
<div id="Canvas" style="position:relative;height:5px;width:5px;"></div>
<script type="text/javascript" language="javascript" src="wz_jsgraphics.js"></script>
<script type="text/javascript" language="javascript">
var jg = new jsGraphics("Canvas"); // Use the "Canvas" div for drawing
function btn_Draw_Clk()

<input type="button" value="Draw Line" id="btnDraw" onclick="btn_Draw_Clk();" />
<div id="div_map" style="width:800px;height:1000px;border: 3px solid #ccc; " >


User interface:

When user clicks on the “Draw Line” button:

There is nothing great on my side to draw a line :), but I was just referring the third party JavaScript file. We can also draw many other objects like rectangle, polygon, point, eclipse, circle.

I would like to share my more work examples using this third party in next posts.

No comments:

Post a Comment