【转】用JS在正方形方框内打印一个圆

作者: ldsea 分类: 程序生活 发布时间: 2009-03-08 10:37

转载自:[url=http://fujiangyun.com.cn/article_view.asp?id=41]http://fujiangyun.com.cn/article_view.asp?id=41[/url]
本题目源自我之前写的一篇日志:[url=http://www.ldsea.cn/java_PrintCircle/]http://www.ldsea.cn/java_PrintCircle/[/url]
付兄用js实现了该算法
[code]
<!–
程序功能:利用js在一个方框内打印一个圆
程序制作:付江云
算法来源:梁栋
说明:本程序中相关的html和js编程不重要,重要的是希望大家能理解到这个算法,利用这种方式打印一个纵向100个点的实验需要执行近15秒,网页打开时打开会卡会儿后出现一个圆,除了上下两头比较稀疏,其他地方点看起来都还密集。
测试环境:T5450 @1.66GHZ,1G内存
–>
<html>
<head>
<title>用JS在正方形方框内打印一个圆</title>
<!–下面定义打印点的颜色–>
<style>
.dian{background-color:red;}
</style>
</head>
<body>
<script>
<!–
//定义几个需要用的变量,x1和x2是横线和圆的两个交点,y是定义的纵向坐标数,borderwidth是整个正方形的边框厚度,danwei是每个点的象素,banjing是以象素为单位的半径值。
var x1,x2,y,borderwidth=1,danwei=1,banjing=100;

//定义画园主函数,主要功能有画一个边框,以及在每一行根据圆的方程计算出圆上的两点横坐标,并且调用huadian()函数将两点用生成红色span块的方式“打印”出来,如此循环直到打印完所有行的点,结束。
function huanyuan()
{
bw=2*(banjing*danwei+borderwidth);
        bh=2*(banjing*danwei+borderwidth);
document.body.innerHTML+='<div id=MainMap style=position:absolute;left:'+(document.body.clientWidth-bw)/2+';top:'+(document.body.clientHeight-bh)/2+';width:'+bw+';height:'+bh+';border-width:'+borderwidth+';border-style:outset;border-color:#00ff00></div>';
for(y=0;y<2*banjing;y++)
{
  x1=parseInt(banjing-Math.sqrt(banjing*banjing-(y-banjing)*(y-banjing)));
  x2=parseInt(banjing+Math.sqrt(banjing*banjing-(y-banjing)*(y-banjing)));
  huadian(x1*danwei,y*danwei);
  huadian(x2*danwei,y*danwei);
}
}

//定义画点函数,根据传递过来的参数确定生成的span块(即圆上的点)的位置。
function huadian(zuo,gao)
{
MainMap.innerHTML += '<span style=position:absolute;left:'+zuo+';top:'+gao+';width:'+danwei+';height:'+danwei+';overflow:hidden class=dian></span>';
}
onload=huanyuan;//窗口加载时运行画圆主函数。
//–>
</script>
</body>
</html>
[/code]
下面的图是我运行后的截图
[img][attach]176[/attach][/img]
一个很标准的圆。
这时,可能有人会问了,原先那个java的算法,要1000个点才大概像个圆,即使是1000了也没有像这个js函数画的圆标准,这段js,纵向只有100个点,如上图所示,就已经相当圆了
关键地方就在于画点的方式不一样,我在用java程序实现时,用的是System.out.println(),这个打出的一个空格或者*号,这样占据的一个字符的位置。而付兄在这段js代码中,用的画点的方式如下:
[code]function huadian(zuo,gao)
{
MainMap.innerHTML += '<span style=position:absolute;left:'+zuo+';top:'+gao+';width:'+danwei+';height:'+danwei+';overflow:hidden class=dian></span>';
}[/code]
是用html中的像素点描述的,这样一个点其实只占一个像素点,这样的话,不需要很大的半径,就可以画出很精细的圆形了:)

发表回复

您的电子邮箱地址不会被公开。