001.<script language="javascript" type="text/javascript">
002.var canvasDiv=document.getElementById("canvas");
003.var gr=new jsGraphics(canvasDiv);
004.setPen(true);
005.
006.var points=new Array();
007.var ie=false;
008.if(document.all)
009. ie=true;
010.if (!ie)
011.{
012.
013.
014.}
015.canvasDiv.onmousemove = getMouseXY;
016.canvasDiv.onclick=drawPoint;
017.var mouseX = 0;
018.var mouseY = 0;
019.
020.function getMouseXY(e)
021.{
022. if (ie)
023. {
024. mouseX = event.clientX + document.body.parentElement.scrollLeft;
025. mouseY = event.clientY + document.body.parentElement.scrollTop;
026. } else {
027. mouseX = e.pageX;
028. mouseY = e.pageY;
029. }
030. if (mouseX < 0){mouseX = 0}
031. if (mouseY < 0){mouseY = 0}
032.
033. mouseX =mouseX - canvasDiv.offsetLeft;
034. mouseY =mouseY - canvasDiv.offsetTop;
035. return true;
036.}
037.function setPen(noAlert)
038.{
039.
040.
041. if(!noAlert)
042. {
043. if(points.length==0 )
044. {
045. alert("Please click at any location on the blank canvas at left side to plot the points!");
046. return false;
047. }
048. else if(points.length==1)
049. {
050. alert("2 or more points are required to draw any curve! Please plot more points by clicking at any location on the blank canvas at left side.");
051. return false;
052. }
053. }
054. return true;
055.}
056.function drawPoint()
057.{
058. gr.fillRectangle(new jsColor("green"),new jsPoint(mouseX-6,mouseY-6),6,6);
059. points[points.length]=new jsPoint(mouseX-3,mouseY-3);
060.
061. showPoints();
062.
063.}
064.function showPoints()
065.{
066. var n=6;
067. var txt=document.getElementById("txt");
068. txt.innerHTML="";
069.
070. for(var i=0;i<points.length;i++)
071. {
072. txt.innerHTML=txt.innerHTML + "Point(" + points[i].x + "," + points[i].y + "),";
073. }
074.
075.
076.$(document).ready(function(){
077.
078. $("#btn1").click(function(){
079. $.ajax({
080. url: "test2.php" ,
081. type: "POST",
082. datatype: "json",
083.
084. data: 'keyword={ "point_x":"'+$("#points[x]").val()+'" ,"point_y":"'+$("#points[y]").val()+'"}'
085. })
086.
087. .success(function(result) {
088. var obj = jQuery.parseJSON(result);
089. if(obj.status == true)
090. {
091. alert('Success !!! ' + obj.msg);
092. }
093. else
094. {
095. alert('Sadddddd !!! ' + obj.msg);
096. }
097.
098. });
099.
100. });
101. });
102.
103.
104.
105.
106.}
107.
108.
109.
110.
111.
112.
113.
114.</script>
