请在一个html页面上用javascript实现：
1：在页面上绘制一个大表格；
2：在表格上的每个格子里面随机添入数字；
3：按顺序改变每个格子的颜色，让整个表格的颜色显示为4个（2*2）的并列圆。
解释下：也就是2行2列的圆，总共4个圆，不一定是很标准的圆，让人看上去像圆就ok了，谢谢各位大侠，
1：在页面上绘制一个大表格；
2：在表格上的每个格子里面随机添入数字；
3：按顺序改变每个格子的颜色，让整个表格的颜色显示为4个（2*2）的并列圆。
解释下：也就是2行2列的圆，总共4个圆，不一定是很标准的圆，让人看上去像圆就ok了，谢谢各位大侠，
<table border="1">
<tr>
<td>●</td>
<td>●</td>
</tr>
<tr>
<td>●</td>
<td>●</td>
</tr>
</table>
看到中间的4个圆了吗?-_~
不过,运气好,找到以前写的代码了.//===================================================
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//===================================================
//画直线的函数//使用两个数组做为参数
function getLine(theX,theY)
{ var x0=theX[0],y0=theY[0]; //起点
var x1=theX[1],y1=theY[1]; //终点
var yy = y1-y0;
var xx = x1-x0;
var temp = 0;
var theK = 0; //if △y < △x then { K = 2△y fix = 2△x } [公式 斜率k =(y1-y0)/(x1-x0)]
var fix = 0;
var path = "";//先判断那边更长一些,用长的边做递增;
//y/x = 斜率; y/x if 斜率大于 1/2 (也即: y*2 > x ) 则 Y轴递增1 然后斜率减去 x*2 修正一次;
//不管递不递增Y轴斜率都将累加下去(下一次累加并判断),以进行下一次判断。
//假设:y1-y0 < x1-x0. 根据 (2△y 累加) 大于 △x 否来递增下一个Y轴坐标 [y0];大于则递增Y轴
if(yy <= xx)
{ theK = yy*2;
fix = xx*2;
while(x0!=x1)
{ path += x0 + "," + y0;
temp += theK;
x0++;
if(temp > xx)
{ y0++;
temp -= fix;
}
if(x0 != x1)
{ path += ","
}
}
}
else
{ theK = xx*2;
fix = yy*2;
while(y0!=y1)
{ path += x0 + "," + y0;
temp += theK;
y0++;
if(temp > yy)
{ x0++;
temp -= fix;
}
if(y0 != y1)
{ path += ",";
}
}
}
return path;
}
//===================================================
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//返回一个正圆的弧 给出X轴的值和圆半径返回对应的Y轴的值
// _____________
// y = √ r^2 - x^2
//参数不能是负数,根据圆的轴对称性要想获得负数的值可以待此函数返回值后乘以一个-1即可.
function arcForCircle(radius,axisX)
{ if(axisX <= radius && (radius >= axisX>0))
return Math.sqrt((radius*radius)-(axisX*axisX));
else
return null;
}
//===================================================
//----一个测试例子,可以根据半径返回对应的坐标集合
function arc_get(r,step)
{ var sx= Math.abs(r);
var tempY="";
var path ="";
var i =step;
while(i>0)
{ tempY = Math.floor(arcForCircle(r,sx));
sx--
i--;
path += sx + "," + tempY;
if(i != 0)
{ path +=",\n";
}
}
return path;
}
//<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
//===================================================
汗!用arc_get来求得你要改变颜色的格子的编号啊
arc_get( rows[0].cells.length/4, rows.length/4 )
可以得到一个1/4个弧,把返回的path:
function arc_get(r,step)
{ var sx= Math.abs(r);
var tempY="";
var path ="";
var i =step;
while(i>0)
{ tempY = Math.floor(arcForCircle(r,sx));
sx--
i--;
path.push( sx + "," + tempY );
}
return path;
}
var newpath = arc_get( rows[0].cells.length/4, rows.length/4 );//这里的除4是为了能存放4个圆
while(newpath.length)
{
var xy = newpath.pop().split(",");
otable.rows[xy[1]].colls[xy[0]].bgColor = "#000000";
}这样就可以画出1/4个圆了,大侠...
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=GBK">
</head>
<body>
<script>
var l = 17;
var r = 8;var tab = document.createElement("TABLE");
tab.style.tableLayout = "fixed";
tab.cellSpacing = 0;
for (var i=0; i<2*l; i++) {
var row = tab.insertRow(-1);
for (var j=0; j<2*l; j++) {
var cell = row.insertCell(-1);
cell.style.cssText = "background-color:#eee; width:1px; height:1px; overflow:hidden;";
}
}
for (var i=0; i<l*2; i++) {
var y = Math.abs(i % l - r);
var x = Math.round(Math.sqrt(r*r-y*y));
tab.rows[i].cells[r-x].style.backgroundColor = "#f00";
tab.rows[i].cells[r+x].style.backgroundColor = "#f00";
tab.rows[i].cells[l+r-x].style.backgroundColor = "#f00";
tab.rows[i].cells[l+r+x].style.backgroundColor = "#f00"; tab.rows[r-x].cells[i].style.backgroundColor = "#f00";
tab.rows[r+x].cells[i].style.backgroundColor = "#f00";
tab.rows[l+r-x].cells[i].style.backgroundColor = "#f00";
tab.rows[l+r+x].cells[i].style.backgroundColor = "#f00";
}
document.body.appendChild(tab);
</script>
</body>
</html>