Please click on this link to down load Third party JavaScript file.
wz_jsgraphics.zip download
Please click on this link to explore the members this third party javascript file has
wz_jsgraphics members
Ex:-
I would like to write an HTML file that draws a line on button click using above down loaded JavaScript file.
Note:
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
wz_jsgraphics.zip download
Html File :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Line</title>
</head>
<body>
<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()
{
jg.setStroke(2);
jg.setColor('red');
jg.drawLine(10,50,300,200);
jg.paint();
}
</script>
<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; " >
</div>
</body>
</html>
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