网站首页 > 知识剖析正文

有趣的分形(二):六边形雪花

nixiaole 2025-01-05 19:29:46 知识剖析 18 ℃

你喜欢下雪吗？你心中的雪花是什么形状的呢？

如上图，美丽的雪花也是一种分形图。

下面我们就用代码来实现一种六边形雪花分形图，同样是用javascript。

【先看效果图】

【上代码】

<script type="text/javascript">

  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  var depth = 0;	//初始深度为0
  var sqrt3 = Math.sqrt(3);		//开方3 * L为直角边长度

//画一个六边形
  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)
  {
  //深度>0，则以L/3长度递归画7个子六边形
    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 {	//n = 0, 则画一个六边形
		drawHexagon(x,y,L);
	}
  }

  function go()
  {
//每次填充为黑色
    ctx.fillStyle = "#000000";
    ctx.fillRect(0,0,500,500); 
	
    drawHexaflake(depth,250,250,200);

//深度为4时结束
    if (depth < 4)
    {
	depth++;
    }

  }

  //每隔两秒执行，每次让深度depth+1
  window.setInterval('go()',2000);

</script>

<body>
<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;"></canvas>
</body>

【要点分析】

每隔两秒的每次执行都是完成一幅图(depth从n到0)；
depth>0时递归绘制，结束条件是depth=0；
六边形的长度计算，定位，依次画出；
六边形分形以每边的1/3绘制，外围六个六边形的最里边构成一个六边形，所以要绘制7个小六边形。

上一篇： HTML5学习笔记-绘制变形图形之组合效果
下一篇： Javascript图形(一):阿基米德螺线

网站首页 > 知识剖析 正文

有趣的分形(二):六边形雪花

猜你喜欢

网站首页 > 知识剖析正文