JavaScript圖形實例：像雪花同樣的Hexaflake分形

時間 2020-07-10

標籤 javascript 圖形實例雪花同樣 hexaflake 分形欄目 JavaScript 简体版

原文原文鏈接

編寫以下的函數：javascript

function drawHexagon(x,y,L)html

{java

ctx.beginPath();canvas

ctx.moveTo(x-sqrt3/2*L,y-L/2);瀏覽器

ctx.lineTo(x-sqrt3/2*L,y+L/2);函數

ctx.lineTo(x,y+L);spa

ctx.lineTo(x+sqrt3/2*L,y+L/2);3d

ctx.lineTo(x+sqrt3/2*L,y-L/2);htm

ctx.lineTo(x,y-L);blog

ctx.closePath();

ctx.fillStyle = "#00FFFF";

ctx.fill();

}

函數中sqrt3的值爲Math.sqrt(3)。該函數的功能是：以座標(x,y)爲中心點，繪製一個邊長爲L的正六邊形並進行填充，如圖1所示。

圖1 正六邊形

編寫以下的調用語句：

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);

能夠繪製出如圖2所示的7個小正六邊形，這7個小正六邊形正好填充在以(x,y)爲中心邊長爲L的大正六邊形中。

圖2 7個正六邊形組成的圖案

Hexaflake分形圖案的構造過程是：以（x,y）爲中心點繪製一個邊長爲L的正六邊形並進行顏色填充；在這個正六邊形中找到7個點，以這7個點爲中心分別繪製7個邊長爲L/3的正六邊形並進行顏色填充，替換掉原來邊長爲L的正六邊形；重複以上操做直至達到要求的層數，能夠繪製出Hexaflake分形圖案，如圖3所示。

圖3 Hexaflake分形圖案的生成

Hexaflake分形採用遞歸過程易於實現，編寫以下的HTML代碼。

<!DOCTYPE html>

<head>

<title>Hexaflake分形</title>

</head>

<body>

</canvas>

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分形圖案，如圖4所示。

圖4 遞歸深度maxdepth =4的Hexaflake分形

執行語句： ctx.fillStyle="black";

ctx.fillRect(0,0,500,500);

將屏幕背景設置爲黑色，將繪製的正六邊形用白色填充，則在瀏覽器窗口中繪製出的Hexaflake分形圖案像雪花兒同樣，如圖5所示。

圖5 像雪花同樣的Hexaflake分形

將Hexaflake分形的生成過程進行動態展現，編寫以下的HTML文件。

<!DOCTYPE html>

<head>

<title>Hexaflake分形</title>

</head>

<body>

</canvas>

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文件，在瀏覽器窗口中呈現出如圖6所示的Hexaflake分形動態生成效果。

圖6 Hexaflake分形圖案動態生成

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。