JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形
編寫如下的函數(shù)：
function drawHexagon(x,y,L) { ctx.beginPath(); ctx.moveTo(x-sqrt3/2*L,y-L/2); ctx.lineTo(x-sqrt3/2*L,y+L/2); ctx.lineTo(x,y+L); ctx.lineTo(x+sqrt3/2*L,y+L/2); ctx.lineTo(x+sqrt3/2*L,y-L/2); ctx.lineTo(x,y-L); ctx.closePath(); ctx.fillStyle = '#00FFFF'; ctx.fill(); }
函數(shù)中sqrt3的值為Math.sqrt(3)。該函數(shù)的功能是：以坐標(biāo)(x,y)為中心點(diǎn)，繪制一個邊長為L的正六邊形并進(jìn)行填充，如下圖所示。
編寫如下的調(diào)用語句：
var x=250; var y=250; var L=200; drawHexagon(x,y-2*L/3,L/3); drawHexagon(x,y,L/3); drawHexagon(x,y+2*L/3,L/3); drawHexagon(x-sqrt3/3*L,y+L/3,L/3); drawHexagon(x-sqrt3/3*L,y-L/3,L/3); drawHexagon(x+sqrt3/3*L,y+L/3,L/3); drawHexagon(x+sqrt3/3*L,y-L/3,L/3);
可以繪制出如下圖所示的7個小正六邊形，這7個小正六邊形正好填充在以(x,y)為中心邊長為L的大正六邊形中。
Hexaflake分形圖案的構(gòu)造過程是：以（x,y）為中心點(diǎn)繪制一個邊長為L的正六邊形并進(jìn)行顏色填充；在這個正六邊形中找到7個點(diǎn)，以這7個點(diǎn)為中心分別繪制7個邊長為L/3的正六邊形并進(jìn)行顏色填充，替換掉原來邊長為L的正六邊形；重復(fù)以上操作直至達(dá)到要求的層數(shù)，可以繪制出Hexaflake分形圖案，如下圖所示。
Hexaflake分形采用遞歸過程易于實(shí)現(xiàn)，編寫如下的HTML代碼。
<!DOCTYPE html><head><title>Hexaflake分形</title></head><body><canvas style='border:3px double #996633;'></canvas><script type='text/javascript'> var canvas = document.getElementById(’myCanvas’); var ctx = canvas.getContext(’2d’); var maxdepth =4; var sqrt3=Math.sqrt(3); function drawHexagon(x,y,L) { ctx.beginPath(); ctx.moveTo(x-sqrt3/2*L,y-L/2); ctx.lineTo(x-sqrt3/2*L,y+L/2); ctx.lineTo(x,y+L); ctx.lineTo(x+sqrt3/2*L,y+L/2); ctx.lineTo(x+sqrt3/2*L,y-L/2); ctx.lineTo(x,y-L); ctx.closePath(); ctx.fillStyle = '#00FFFF'; ctx.fill(); } function drawHexaflake(n,x,y,L) { if(n>0) { drawHexaflake(n-1,x,y-2*L/3,L/3); drawHexaflake(n-1,x,y,L/3); drawHexaflake(n-1,x,y+2*L/3,L/3); drawHexaflake(n-1,x-sqrt3/3*L,y+L/3,L/3); drawHexaflake(n-1,x-sqrt3/3*L,y-L/3,L/3); drawHexaflake(n-1,x+sqrt3/3*L,y+L/3,L/3); drawHexaflake(n-1,x+sqrt3/3*L,y-L/3,L/3); } else drawHexagon(x,y,L); } drawHexaflake(maxdepth,250,250,200);</script></body></html>
在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中繪制出的Hexaflake分形圖案，如下圖所示。
執(zhí)行語句：
ctx.fillStyle='black';ctx.fillRect(0,0,500,500);
將屏幕背景設(shè)置為黑色，將繪制的正六邊形用白色填充，則在瀏覽器窗口中繪制出的Hexaflake分形圖案像雪花兒一樣，如下圖所示。
將Hexaflake分形的生成過程進(jìn)行動態(tài)展示，編寫如下的HTML文件。
<!DOCTYPE html><head><title>Hexaflake分形</title></head><body><canvas style='border:3px double #996633;'></canvas><script type='text/javascript'> var canvas = document.getElementById(’myCanvas’); var ctx = canvas.getContext(’2d’); var depth =0; var sqrt3=Math.sqrt(3); function drawHexagon(x,y,L) { ctx.beginPath(); ctx.moveTo(x-sqrt3/2*L,y-L/2); ctx.lineTo(x-sqrt3/2*L,y+L/2); ctx.lineTo(x,y+L); ctx.lineTo(x+sqrt3/2*L,y+L/2); ctx.lineTo(x+sqrt3/2*L,y-L/2); ctx.lineTo(x,y-L); ctx.closePath(); ctx.fillStyle = '#FFFFFF'; ctx.fill(); } function drawHexaflake(n,x,y,L) { if(n>0) { drawHexaflake(n-1,x,y-2*L/3,L/3); drawHexaflake(n-1,x,y,L/3); drawHexaflake(n-1,x,y+2*L/3,L/3); drawHexaflake(n-1,x-sqrt3/3*L,y+L/3,L/3); drawHexaflake(n-1,x-sqrt3/3*L,y-L/3,L/3); drawHexaflake(n-1,x+sqrt3/3*L,y+L/3,L/3); drawHexaflake(n-1,x+sqrt3/3*L,y-L/3,L/3); } else drawHexagon(x,y,L); } function go() { ctx.fillStyle = '#000000'; ctx.fillRect(0,0,500,500); drawHexaflake(depth,250,250,200); depth++; if (depth>4) { depth=0; } } window.setInterval(’go()’,1500);</script></body></html>
在瀏覽器中打開包含這段HTML代碼的html文件，在瀏覽器窗口中呈現(xiàn)出如下圖所示的Hexaflake分形動態(tài)生成效果。
以上就是JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Hexaflake分形的資料請關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. ASP刪除img標(biāo)簽的style屬性只保留src的正則函數(shù)2. 使用css實(shí)現(xiàn)全兼容tooltip提示框3. 一文帶你搞懂JavaScript中的進(jìn)制與進(jìn)制轉(zhuǎn)換4. 得到XML文檔大小的方法5. 詳解JS前端使用迭代器和生成器原理及示例6. javascript xml xsl取值及數(shù)據(jù)修改第1/2頁7. 詳解CSS偽元素的妙用單標(biāo)簽之美8. ASP編碼必備的8條原則9. 匹配模式 - XSL教程 - 410. 怎樣才能用js生成xmldom對象，并且在firefox中也實(shí)現(xiàn)xml數(shù)據(jù)島？
網(wǎng)公網(wǎng)安備