JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形
編寫(xiě)如下的函數(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)，繪制一個(gè)邊長(zhǎng)為L(zhǎng)的正六邊形并進(jìn)行填充，如下圖所示。
編寫(xiě)如下的調(diào)用語(yǔ)句：
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個(gè)小正六邊形，這7個(gè)小正六邊形正好填充在以(x,y)為中心邊長(zhǎng)為L(zhǎng)的大正六邊形中。
Hexaflake分形圖案的構(gòu)造過(guò)程是：以（x,y）為中心點(diǎn)繪制一個(gè)邊長(zhǎng)為L(zhǎng)的正六邊形并進(jìn)行顏色填充；在這個(gè)正六邊形中找到7個(gè)點(diǎn)，以這7個(gè)點(diǎn)為中心分別繪制7個(gè)邊長(zhǎng)為L(zhǎng)/3的正六邊形并進(jìn)行顏色填充，替換掉原來(lái)邊長(zhǎng)為L(zhǎng)的正六邊形；重復(fù)以上操作直至達(dá)到要求的層數(shù)，可以繪制出Hexaflake分形圖案，如下圖所示。
Hexaflake分形采用遞歸過(guò)程易于實(shí)現(xiàn)，編寫(xiě)如下的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>
在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中繪制出的Hexaflake分形圖案，如下圖所示。
執(zhí)行語(yǔ)句：
ctx.fillStyle='black';ctx.fillRect(0,0,500,500);
將屏幕背景設(shè)置為黑色，將繪制的正六邊形用白色填充，則在瀏覽器窗口中繪制出的Hexaflake分形圖案像雪花兒一樣，如下圖所示。
將Hexaflake分形的生成過(guò)程進(jìn)行動(dòng)態(tài)展示，編寫(xiě)如下的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>
在瀏覽器中打開(kāi)包含這段HTML代碼的html文件，在瀏覽器窗口中呈現(xiàn)出如下圖所示的Hexaflake分形動(dòng)態(tài)生成效果。
以上就是JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形的詳細(xì)內(nèi)容，更多關(guān)于JavaScript Hexaflake分形的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹(shù)形下拉框的方法2. 如何通過(guò)vscode運(yùn)行調(diào)試javascript代碼3. HTML <!DOCTYPE> 標(biāo)簽4. JS數(shù)據(jù)類(lèi)型判斷的幾種常用方法5. 用Python自動(dòng)下載網(wǎng)站所有文件6. WML語(yǔ)言的基本情況7. python中str內(nèi)置函數(shù)用法總結(jié)8. Ajax實(shí)現(xiàn)頁(yè)面無(wú)刷新留言效果9. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能10. python爬蟲(chóng)使用requests發(fā)送post請(qǐng)求示例詳解
網(wǎng)公網(wǎng)安備