用javascript实现画板的代码

　　在控制台中输入
db.drawCircle([50,50],20,black);
db.drawLine([5,5],[36,44],red);
可以看到效果
复制代码 代码如下:
<bodystyle=margin:0px;>
</body>
<script>
functionDrawingBoard(width,height,size)
{
size=size3
varcontainer=document.createElement(div);

container.runtimeStyle.width=(width)*size+px;
container.runtimeStyle.height=(height)*size+px;
container.runtimeStyle.margin=0px;
//container.style.border=solid1pxblue;
varcount=0;
for(vary=0;y<height;y++)
{
for(varx=0;x<width;x++)
{
varcurr=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)
{
vardx=start[0]-end[0];
vardy=start[1]-end[1];
varx,y;

if(Math.abs(dx)>Math.abs(dy))
{
for(varx=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(vary=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(varr=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)
{
returnp[0]+p[1]*width;
}

container=null;
}
functionConsole(width,height,command)
{
varcontainer=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);
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;
command=commandfunction(str)
{

vare;
try{
varr=eval(str);
}catch(e){
returnBadcommand;
}
returnr;

}
this.run=function(str)
{

this.input.parentNode.childNodes[0].innerHTML+=str+<br/>
this.input.parentNode.childNodes[0].innerHTML+=(command(str)+<br/>)

}
{
this.parentNode.childNodes[0].innerHTML+=this.value+<br/>
this.parentNode.childNodes[0].innerHTML+=(command(this.value)+<br/>)
}
this.input.onkeyup=newFunction(e,e=eevent;if(e.keyCode!=13)return;this.command();this.value=;);
this.appendto=function(parent)
{
parent.appendChild(this.container);
}
container=null;
}

varc=newConsole(100%,50%);
c.appendto(document.body);
c.run(window.db=newDrawingBoard(100,100);document.body.appendChild(db.container););
</script>