精彩:JS畫的圖形[Good篇] (轉)
<!--
如果您想線上看看效果:/test/2.htm">
-->
ns:v="urn:schemas--com:vml">
style="position:relative;WIDTH:800px;HEIGHT:600px;top:0;left:0;" CoordOrig="-500,-500" coordsize="1000,1000">
function line(x, y, x1, y1, n) (x1 - n) + "," + y1 + "" style="position:relative;top:-80;left:-50;z -index:9999;" strokeweight="1pt">
{
document.write("
// 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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 精彩:JS畫的圖形[金剛石篇] (轉)JS
- css 畫圖形大全CSS
- 畫影圖形: SVG & Canvas 圖形對比SVGCanvas
- 箱形圖(python畫圖)Python
- Canvas 畫圖 - 滑鼠移動圖形Canvas
- DrawPad 圖形繪畫工具
- DrawPad圖形繪畫工具
- DrawPad for mac 圖形繪畫工具Mac
- DrawPad for mac圖形繪畫工具Mac
- mac圖形繪畫工具:DrawPadMac
- js 3d圖形JS3D
- vis.js條形圖JS
- 《黑客與畫家》精彩評論黑客
- 純CSS畫的基本圖形(矩形、圓形、三角形、多邊形、愛心、八卦CSS
- 使用CAShapeLayer與UIBezierPath畫出想要的圖形UI
- 使用CreateJS繪製圖形JS
- AutoCAD畫圖技巧總結篇
- jQuery隨滑鼠旋轉的圖形效果jQuery
- DirectX圖形介面指南的介紹(轉)
- Good Coding Skills Are Not Enough (轉)Go
- Bresenham畫線演算法(計算機圖形學)演算法計算機
- 圖形使用者介面(轉)
- DirectX 圖形介面指南(2) (轉)
- DirectX 圖形介面指南(4) (轉)
- DirectX 圖形介面指南(3) (轉)
- DirectX 圖形介面指南(5) (轉)
- DirectX 圖形介面指南(6) (轉)
- DirectX 圖形介面指南(7) (轉)
- 急救~進不了圖形介面(轉)
- vis.js可動的3d圖形JS3D
- 遊戲原畫教程:角色設計中的幾個基本圖形的用法遊戲
- 放肆的使用 UIBezierPath 和 CAShapeLayer 畫各種圖形UI
- Visual C++中的圖形特技 (轉)C++
- js全形字元轉為半形字元JS字元
- 《WTL起步 - 玩轉圖形介面》目錄 (轉)
- Linux圖形介面知識-輕鬆更換圖形環境(轉)Linux
- GoJS互動式圖形庫常用的方法(二)GoJS
- 13個JavaScript圖表(JS圖表)圖形繪製外掛JavaScriptJS