This is JavaScript program for drawing curvs:
Code:
<html>
<head>
<title>Test</title>
<style>
.PE{
position:absolute;
width:1px;
height:1px;
background-color:#EDEDED;
}
.PEMark{
position:absolute;
width:1px;
height:1px;
background-color:#FF0000;
}
.PEAxis{
position:absolute;
width:1px;
height:1px;
background-color:#990000;
}
</style>
<script>
function Test(){
var dr = new JsDrawer("Container",160,160,-80,80);
dr.DrawCanvas();
dr.DrawLine();
}
JsDrawer.prototype.DrawCanvas = JsDrawer_DrawCanvas;
JsDrawer.prototype.DrawLine = JsDrawer_DrawLine;
JsDrawer.prototype.Equation = JsDrawer_Equation;
function JsDrawer(sId,iNumRows,iNumCols,iStartX,iStartY){
this.Id = sId;
this.InitX = 50;
this.InitY = 50;
this.NumRows = iNumRows + this.InitX;
this.NumCols = iNumCols + this.InitY;
this.StartX = iStartX;
this.StartY = iStartY;
this.Container = document.getElementById(this.Id);
this.StartTime = null;
this.EndTime = null
}
//----------------------- EQUATATION IS DEFINED HERE:
function JsDrawer_Equation(x){
var y = x * x;
return y;
}
//---------------------------------------------------
function JsDrawer_DrawLine(){
var x = this.StartX;
for(var i=this.InitX; i<this.NumCols; i += 1){
x += 1;
var y = this.Equation(x);
y = (y > 0)?Math.floor(y):Math.ceil(y);
var point = document.getElementById("E_" + x + "_" + y);
if(point != null) point.className = "PEMark";
}
this.EndTime = new Date().getTime();
window.status = "End, time taken: " + (this.EndTime - this.StartTime);
}
function JsDrawer_DrawCanvas(){
var str = "";
this.StartTime = new Date().getTime();
window.status = "Please wait ...";
var x = this.StartX;
for(var i=this.InitX; i<this.NumCols; i += 1){
var y = this.StartY;
for(var j=this.InitY; j<this.NumRows; j += 1){
var currSpan = document.createElement('span');
currSpan.id = "E_" + x + "_" + y;
currSpan.style.left = i+"px";
currSpan.style.top = j+"px";
currSpan.className = (x==0 || y==0)?"PEAxis":"PE";
this.Container.appendChild(currSpan);
y -= 1;
}
x += 1;
}
var endTimeFirstStage = new Date().getTime();
//prompt(',this.Container.innerHTML);
window.status = "Elements created, it took this time: " + (endTimeFirstStage - this.StartTime);
}
</script>
</head>
<body>
<div id="Container" style="left:0;top:0"></div>
<br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
<form>
<input type="button" value="Try" onclick="Test()">
</form>
</body>
</html>
