Enter in console
Db.drawcircle ([50,50],20, "Black");
Db.drawline ([5,5],[36,44], "red");
You can see the effect
Copy Code code as follows:
<body style= "margin:0px;" >
</body>
<script>
function Drawingboard (width,height,size)
{
size=size| | 3
var container=document.createelement ("div");
This.container=container;
Container.runtimestyle.width= (width) *size+ "px";
container.runtimestyle.height= (height) *size+ "px";
container.runtimestyle.margin= "0px";
container.style.border= "Solid 1px blue";
var count=0;
for (Var y=0;y{
for (Var x=0;x<width;x++)
{
var curr=document.createelement ("div");
curr.runtimestyle.height=size+ "px";
curr.runtimestyle.width=size+ "px";
curr.runtimestyle.display= "inline";
Curr.runtimestyle.overflow= "hidden";
Curr.style.backgroundcolor= "Green";
Curr.src= "";
Container.appendchild (Curr);
}
}
alert (Curr.currentStyle.display);
Document.body.appendChild (container);
This.drawline=function (Start,end,color)
{
var dx=start[0]-end[0];
var dy=start[1]-end[1];
var x,y;
if (math.abs (dx) > Math.Abs (DY))
{
For (Var x=start[0];x!=end[0]+ (end[0]-start[0))/math.abs (end[0]-start[0) x+= (end[0]-start[0))/Math.abs (end[0]- Start[0]))
{
Y=math.round ((x-start[0])/dx*dy+start[1]);
This.container.childnodes[this.trans ([x,y])].style.backgroundcolor=color;
}
}
Else
{
For (Var y=start[1];y!=end[1]+ (end[1]-start[1))/math.abs (end[1]-start[1) y+= (end[1]-start[1))/Math.abs (end[1]- START[1]))
{
X=math.round ((y-start[1])/dy*dx+start[0]);
This.container.childnodes[this.trans ([x,y])].style.backgroundcolor=color;
}
}
}
This.drawcircle=function (M,r,color)
{
For (Var R=0;r<=math.floor (math.sqrt (r*r-r*r)); r++)
{
X=m[0]+r;y=m[1]+math.floor (Math.sqrt (r*r-r*r));
This.container.childnodes[this.trans ([x,y])].style.backgroundcolor=color;
X=m[0]-r;y=m[1]+math.floor (Math.sqrt (r*r-r*r));
This.container.childnodes[this.trans ([x,y])].style.backgroundcolor=color;
X=m[0]+r;y=m[1]-math.floor (Math.sqrt (r*r-r*r));
This.container.childnodes[this.trans ([x,y])].style.backgroundcolor=color;
X=m[0]-r;y=m[1]-math.floor (Math.sqrt (r*r-r*r));
This.container.childnodes[this.trans ([x,y])].style.backgroundcolor=color;
Y=m[1]+r;x=m[0]+math.floor (Math.sqrt (r*r-r*r));
This.container.childnodes[this.trans ([x,y])].style.backgroundcolor=color;
Y=m[1]-r;x=m[0]+math.floor (Math.sqrt (r*r-r*r));
This.container.childnodes[this.trans ([x,y])].style.backgroundcolor=color;
Y=m[1]+r;x=m[0]-math.floor (Math.sqrt (r*r-r*r));
This.container.childnodes[this.trans ([x,y])].style.backgroundcolor=color;
Y=m[1]-r;x=m[0]-math.floor (Math.sqrt (r*r-r*r));
This.container.childnodes[this.trans ([x,y])].style.backgroundcolor=color;
}
}
This.appendto=function (parent)
{
Parent.appendchild (This.container);
}
This.drawpoint=function (P,color)
{
This.container.childnodes[this.trans (p)].style.backgroundcolor=color;
}
This.trans=function (P)
{
return p[0]+p[1]*width;
}
Container=null;
}
function Console (Width,height,command)
{
var container=document.createelement ("div");
This.container=container;
Container.runtimestyle.width= (width);
container.runtimestyle.height= (height);
container.runtimestyle.margin= "0px";
Container.runtimestyle.backgroundcolor= "BLACK";
Container.runtimestyle.fontfamily= "Terminal";
container.runtimestyle.color= "White";
Container.runtimestyle.fontsize= "16px";
This.output=document.createelement ("div");
Container.appendchild (This.output);
container.innerhtml+= "Js>"
This.input=document.createelement ("input");
Container.appendchild (This.input);
This.input.runtimestyle.backgroundcolor= "BLACK";
This.input.runtimestyle.borderwidth= "0px";
this.input.runtimestyle.color= "White";
This.input.runtimestyle.fontfamily= "Terminal";
This.input.runtimestyle.width= "90%"
This.input.runtimestyle.fontsize= "16px"
This.input.runtimestyle.position= "relative";
this.input.runtimestyle.top= "2px";
command=command| | function (str)
{
var e;
try{
var r=eval (str);
catch (e) {
Return to "bad command";
}
return R;
}
This.run=function (str)
{
this.input.parentnode.childnodes[0].innerhtml+=str+ ' <br/> '
this.input.parentnode.childnodes[0].innerhtml+= (Command (str) + "<br/>")
}
This.input.command=function ()
{
This.parentnode.childnodes[0].innerhtml+=this.value+ ' <br/> '
this.parentnode.childnodes[0].innerhtml+= (Command (this.value) + "<br/>")
}
This.input.onkeyup=new Function ("E", "e=e| | Event;if (e.keycode!=13) Return;this.command (); this.value= '; ');
This.appendto=function (parent)
{
Parent.appendchild (This.container);
}
Container=null;
}
var c=new Console ("100%", "50%");
C.appendto (document.body);
C.run ("Window.db=new drawingboard (100,100);d ocument.body.appendChild (Db.container);");
</script>