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. PHP laravel實(shí)現(xiàn)導(dǎo)出PDF功能2. Python-openpyxl表格讀取寫(xiě)入的案例詳解3. JavaScript實(shí)現(xiàn)留言板實(shí)戰(zhàn)案例4. 資深程序員：給Python軟件開(kāi)發(fā)測(cè)試的25個(gè)忠告！5. Python使用Selenium自動(dòng)進(jìn)行百度搜索的實(shí)現(xiàn)6. JS中6個(gè)對(duì)象數(shù)組去重的方法7. 使用Blazor框架實(shí)現(xiàn)在前端瀏覽器中導(dǎo)入和導(dǎo)出Excel8. ASP基礎(chǔ)知識(shí)Command對(duì)象講解9. vscode運(yùn)行php報(bào)錯(cuò)php?not?found解決辦法10. python中文本字符處理的簡(jiǎn)單方法記錄
網(wǎng)公網(wǎng)安備