精彩: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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS3的過渡,動畫,圖形轉換CSSS3動畫
- 箱形圖(python畫圖)Python
- 畫影圖形: SVG & Canvas 圖形對比SVGCanvas
- css 畫圖形大全CSS
- DrawPad 圖形繪畫工具
- DrawPad圖形繪畫工具
- js 3d圖形JS3D
- vis.js條形圖JS
- 2.2 畫出函式圖形函式
- mac圖形繪畫工具:DrawPadMac
- DrawPad for mac 圖形繪畫工具Mac
- DrawPad for mac圖形繪畫工具Mac
- Android Reveal圓形Activity轉場動畫Android動畫
- js全形字元轉為半形字元JS字元
- Quart2D 畫圖一 (簡單畫線、形狀)
- vis.js可動的3d圖形JS3D
- js圖片 轉換JS
- AutoCAD畫圖技巧總結篇
- canvas 圖形圍繞中心旋轉Canvas
- Viso的物件圖形複製到word,發現圖形畫布底部有大量空白,如何解決物件
- vis.js工具提示3d圖形JS3D
- vis.js造型曲面3d圖形JS3D
- Vue.js實現圖形驗證碼Vue.js
- 圖片轉繪畫效和繪畫軟體
- 好用的向量圖形轉換軟體:vector magic for MacMac
- CSS基礎篇–CSS3圖片翻轉動畫技術詳解CSSS3動畫
- js字串string轉object物件 - 方法篇JS字串Object物件
- 圖形學 畫直線 DDA掃描法與中點畫線法
- 01-Python 圖片轉字元畫Python字元
- 超實用又簡單的畫素圖轉向量圖方法
- AE/PR指令碼模板-100種彩色漸變圖形動畫轉場過渡 Gradient Transitions Pack指令碼動畫
- 圖形學 旋轉與投影矩陣—2矩陣
- 圖形學 旋轉與投影矩陣-3矩陣
- 圖形學 旋轉與投影矩陣—1矩陣
- js視訊轉字元畫 —— 寫一個屬於自己的字元轉換器JS字元
- Android 12(S) 圖形顯示系統 - 開篇Android
- JB的Python之旅-爬蟲篇-圖形驗證碼(1)-- tesserocrPython爬蟲
- 「技美之路 第05篇」圖形 1.3 紋理的祕密
- 遊戲原畫教程:角色設計中的幾個基本圖形的用法遊戲