用javascript實(shí)現(xiàn)畫(huà)板的代碼
更新時(shí)間：2007年09月05日 22:26:45 作者：
在控制臺(tái)中輸入
db.drawCircle([50,50],20,"black");
db.drawLine([5,5],[36,44],"red");
可以看到效果
復(fù)制代碼 代碼如下:
<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<height;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 "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);document.body.appendChild(db.container);");
</script>
您可能感興趣的文章:
- js+canvas實(shí)現(xiàn)畫(huà)板功能
- JS實(shí)現(xiàn)canvas簡(jiǎn)單小畫(huà)板功能
- javascript+Canvas實(shí)現(xiàn)畫(huà)板功能
- javascript實(shí)現(xiàn)畫(huà)板功能
- javascript簡(jiǎn)易畫(huà)板開(kāi)發(fā)
- Javascript HTML5 Canvas實(shí)現(xiàn)的一個(gè)畫(huà)板
- JS基于ocanvas插件實(shí)現(xiàn)的簡(jiǎn)單畫(huà)板效果代碼(附demo源碼下載)
- html5+javascript制作簡(jiǎn)易畫(huà)板附圖
- 純js網(wǎng)頁(yè)畫(huà)板(Graphics)類簡(jiǎn)介及實(shí)現(xiàn)代碼
- JS canvas實(shí)現(xiàn)畫(huà)板和簽字板功能
相關(guān)文章
非常不錯(cuò)的ymyang 繪圖效果代碼。2009-04-04
這篇文章主要為大家詳細(xì)介紹了Bootstrap模態(tài)框插件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
學(xué)好js，這些js函數(shù)概念一定要知道【推薦】
本文主要介紹了一些js函數(shù)概念，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
JavaScript調(diào)用瀏覽器打印功能實(shí)例分析
這篇文章主要介紹了JavaScript調(diào)用瀏覽器打印功能的方法,實(shí)例分析了針對(duì)各種常用瀏覽器調(diào)用打印功能的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果示例
這篇文章主要介紹了原生JS實(shí)現(xiàn)多個(gè)小球碰撞反彈效果,結(jié)合完整實(shí)例形式分析了javascript實(shí)現(xiàn)小球碰撞的相關(guān)數(shù)值計(jì)算、隨機(jī)數(shù)生成、事件響應(yīng)等操作技巧,需要的朋友可以參考下2018-01-01
js DNA動(dòng)態(tài)序列比對(duì)代碼
JavaScript動(dòng)態(tài)序列比對(duì)代碼，隨便 寫(xiě)著玩的，在網(wǎng)上見(jiàn)到用VC、VB寫(xiě)的比較多，這個(gè)算法以前在高中課本上見(jiàn)到過(guò)，我只是用Js寫(xiě)一下試試，或許還不是太準(zhǔn)確。2010-07-07
這篇文章主要介紹了微信小程序如何獲取openid及用戶信息，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
js實(shí)現(xiàn)手表表盤(pán)時(shí)鐘與圓周運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)手表表盤(pán)時(shí)鐘與圓周運(yùn)動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了禁止按回車鍵提交表單的方法的相關(guān)資料,需要的朋友可以參考下2015-06-06
利用Bootstrap Multiselect實(shí)現(xiàn)下拉框多選功能
這篇文章主要介紹了利用Bootstrap Multiselect實(shí)現(xiàn)下拉框多選功能，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04