Full version: jsB@nk » Graphic » Lines and Circles
URL: https://www.javascriptbank.com/lines-and-circles.html
This JavaScript uses DHTML functions in laydiv.js to create hundreds of layers containing tiny dots. It takes a long time to render, but this is the best I could do... The functions DrawCircle() and DrawLine() are in shapes.js file.
Full version: jsB@nk » Graphic » Lines and Circles
URL: https://www.javascriptbank.com/lines-and-circles.html
<SCRIPT name=laydiv.js>//detecting browser to dynamically write appropriate DIVs/LAYERsN=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)M=(navigator.appName.indexOf('Microsoft')!=-1)Vis=new Array()Vis[0]=(M||S) ? "hidden" : "hide"Vis[1]=(M||S) ? "visible" : "show"function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""Styl = (M||S) ? "<DIV" : "<LAYER"if(M||S){Styl+=" ID="+divIdStyl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkColStyl+=";visibility:"+Vis[visb]+";z-index:"+zIndStyl+="'>"}if(N){Styl+=" ID="+divIdStyl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkColStyl+=" visibility="+Vis[visb]+" z-index="+zIndStyl+=">"}document.writeln(Styl)}function EndDiv(){(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")}function PutIt(ID,dX,dY){if(N){document.layers[ID].left=dXdocument.layers[ID].top=dY}if(M){document.all[ID].style.left=dXdocument.all[ID].style.top=dY}if(S){document.getElementById(ID).style.left=dXdocument.getElementById(ID).style.top=dY}}function ShowHide(ID,vs){if(N){document.layers[ID].visibility=Vis[vs]}if(M){document.all[ID].style.visibility=Vis[vs]}if(S){document.getElementById(ID).style.visibility=Vis[vs]}}function Xof(ID){if(N){return document.layers[ID].left}if(M){return document.all[ID].style.left}if(S){return document.getElementById(ID).style.left}}function Yof(ID){if(N){return document.layers[ID].top}if(M){return document.all[ID].style.top}if(S){return document.getElementById(ID).style.top}}function Zind(ID,zz){if(N){document.layers[ID].zIndex=zz}if(M){document.all[ID].style.zIndex=zz}if(S){document.getElementById(ID).style.zIndex=zz}}function ChangeCol(ID,colrx){if(M)document.all[ID].style.background=colrxif(N)document.layers[ID].bgColor=colrxif(S)document.getElementById(ID).style.background=colrx}function DivWrite(IdName,Str) {if (N){document.layers[IdName].document.write(Str)document.layers[IdName].document.close()}if(M) document.all[IdName].innerHTML=Strif(S) document.getElementById(IdName).innerHTML=Str}</SCRIPT><SCRIPT name=shapes.js>function DrawCircle(cX,cY,radius,numP,clor,pnt){//cX,cY=center coords//radius=radius//numP=number of dots required//clor=color of dot//pnt=size of dots (max 6)for(ang=0;ang<numP;ang++){pX=cX-parseInt(radius*Math.cos(2*ang*Math.PI/numP))pY=cY-parseInt(radius*Math.sin(2*ang*Math.PI/numP))GetDiv('o'+ang,pY,pX,10,10,'',1,1)document.write("<font color=",clor," size=",pnt,">.</font>")EndDiv()}}function DrawLine(x1,y1,x2,y2,clor,pnt){//from point (x1,y1) to (point(x2,y2)//clor=color of dot//pnt=size of dots (max 6)DY=y2-y1DX=x2-x1AX=Math.abs(DX)AY=Math.abs(DY)if(AX>=AY){X1=(x1<x2)?x1:x2X2=(x1<x2)?x2:x1Y1=(x1<x2)?y1:y2Y2=(x1<x2)?y2:y1Slope=(Y2-Y1)/(X2-X1)for(px=X1;px<X2;px++){GetDiv('l'+px,Math.round(Y1+Slope*px),px,10,10,'',1,1)document.write("<font color=",clor," size=",pnt,">.</font>")EndDiv()}}else{Y1=(y1<y2)?y1:y2Y2=(y1>y2)?y1:y2X1=(y1<y2)?x1:x2X2=(y1<y2)?x2:x1Slope=(X2-X1)/(Y2-Y1)for(px=Y1;px<Y2;px++){GetDiv('l'+px,px,Math.round(X1+Slope*px),10,10,'',1,1)document.write("<font color=",clor," size=",pnt,">.</font>")EndDiv()}}window.status=DX+":"+AX+" - "+DY+":"+AY}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT>DrawCircle(300,300,100,500,"blue",5)DrawCircle(150,150,200,500,"red",5)DrawLine(200,250,200,500,"lime",5)DrawLine(200,500,400,400,"black",5)DrawLine(400,400,500,200,"cyan",5)DrawLine(50,60,100,20,"black",5)DrawLine(600,500,50,500,"green",5)</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->