精彩:JS畫的圖形[Good篇] (轉)

amyz發表於2007-11-16
精彩:JS畫的圖形[Good篇] (轉)[@more@]

<!--
如果您想線上看看效果:/test/2.htm">
--&gt
ns:v="urn:schemas--com:vml">


test

style="position:relative;WIDTH:800px;HEIGHT:600px;top:0;left:0;"

CoordOrig="-500,-500" coordsize="1000,1000">



function line(x, y, x1, y1, n)
{
  document.write("

(x1 - n) + "," + y1 + "" style="position:relative;top:-80;left:-50;z

-index:9999;" strokeweight="1pt">

");
  //  StrokeColor=Rgb("" + Math.round(Math.ran() * 255 ) + "," +

Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255

) +")
}

var i, j, a;
var length = 1000;  // 方塊邊長
var n = 60, theta = 3;  // 每個方塊裡畫子方塊的個數,偏移角度值
var x = 300, y = 300;  // 原始座標位置
var py = 800;  // x 偏移值

function polygonc(x0, y0, r, n, af)
{
  var x, y, xs, ys, i, dtheta, theta;

  if(n < 3)return;
  dtheta = 6.28318 / n;
  theta = af * 0.0174533;
  xs = x0 + r * Math.cos(theta);
  ys = y0 + r * Math.sin(theta);
  var xo = xs, yo = ys;
  for ( i = 1; i < n; i++)
  {
  theta += dtheta;
  x = x0 + r * Math.cos(theta);
  y = y0 + r * Math.sin(theta);
  line(xs, ys, x, y, py);
 xs = x;
 ys = y;
  }
  line(xs, ys, xo, yo, py);
}

function block(x, y, a, n, theta)
{
  var x0, y0, i, r, t, f, af = 45;
  t = Math.abs(theta * 0.0174533);
  f = 1 / (Math.cos(t) + Math.sin(t));
  r = a / 1.414;
  x0 = x + 0.5 * a;
  y0 = y + 0.5 * a;
  for (i = 1; i <= n; i++)
  {
  polygonc(x0, y0, r, 4, af);
  r = r * f;
  af -= theta;
  }
}

a = length /4;
for (i = 1; i <= 4; i++)
{
  for (j = 1; j <= 4; j++)
  {
  block(x, y, a, n, theta);
  theta = 0 - theta;
  x += a;
  }
  x = 300;
  y -= a;
  theta = 0 - theta
}






來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/10752019/viewspace-982672/,如需轉載,請註明出處,否則將追究法律責任。

相關文章