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)，繪制一個(gè)邊長為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個(gè)小正六邊形，這7個(gè)小正六邊形正好填充在以(x,y)為中心邊長為L的大正六邊形中。
Hexaflake分形圖案的構(gòu)造過程是：以（x,y）為中心點(diǎn)繪制一個(gè)邊長為L的正六邊形并進(jìn)行顏色填充；在這個(gè)正六邊形中找到7個(gè)點(diǎn)，以這7個(gè)點(diǎn)為中心分別繪制7個(gè)邊長為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)行動(dòng)態(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分形動(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. ASP.Net MVC利用NPOI導(dǎo)入導(dǎo)出Excel的示例代碼2. adodb.recordset.open(rs.open)方法參數(shù)詳解3. asp文件如何打開4. 怎樣打開XML文件？xml文件如何打開?5. ASP和PHP文件操作速度的對(duì)比6. ASP替換、保存遠(yuǎn)程圖片實(shí)現(xiàn)代碼7. ASP中Server.HTMLEncode用法(附自定義函數(shù))8. Spring依賴注入的三種方式實(shí)例詳解9. WML教程之文本框控件Input10. ASP基礎(chǔ)入門第二篇(ASP基礎(chǔ)知識(shí))
網(wǎng)公網(wǎng)安備