JavaScript实现像雪花一样的Hexaflake分形


Posted in Javascript onJuly 07, 2020

     编写如下的函数:

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

  }

      函数中sqrt3的值为Math.sqrt(3)。该函数的功能是:以坐标(x,y)为中心点,绘制一个边长为L的正六边形并进行填充,如下图所示。

JavaScript实现像雪花一样的Hexaflake分形

      编写如下的调用语句:

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个小正六边形,这7个小正六边形正好填充在以(x,y)为中心边长为L的大正六边形中。

JavaScript实现像雪花一样的Hexaflake分形

      Hexaflake分形图案的构造过程是:以(x,y)为中心点绘制一个边长为L的正六边形并进行颜色填充;在这个正六边形中找到7个点,以这7个点为中心分别绘制7个边长为L/3的正六边形并进行颜色填充,替换掉原来边长为L的正六边形;重复以上操作直至达到要求的层数,可以绘制出Hexaflake分形图案,如下图所示。

JavaScript实现像雪花一样的Hexaflake分形

      Hexaflake分形采用递归过程易于实现,编写如下的HTML代码。

<!DOCTYPE html>

<head>

<title>Hexaflake分形</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" 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分形图案,如下图所示。

JavaScript实现像雪花一样的Hexaflake分形

      执行语句:  

ctx.fillStyle="black";
ctx.fillRect(0,0,500,500);

      将屏幕背景设置为黑色,将绘制的正六边形用白色填充,则在浏览器窗口中绘制出的Hexaflake分形图案像雪花儿一样,如下图所示。

JavaScript实现像雪花一样的Hexaflake分形

      将Hexaflake分形的生成过程进行动态展示,编写如下的HTML文件。

<!DOCTYPE html>

<head>

<title>Hexaflake分形</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" 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文件,在浏览器窗口中呈现出如下图所示的Hexaflake分形动态生成效果。

JavaScript实现像雪花一样的Hexaflake分形

以上就是JavaScript实现像雪花一样的Hexaflake分形的详细内容,更多关于JavaScript Hexaflake分形的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
jquery ztree实现树的搜索功能
Feb 25 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
Bootstrap DateTime Picker日历控件简单应用
Mar 25 Javascript
vue-infinite-loading2.0 中文文档详解
Apr 08 Javascript
Vue源码解析之数据响应系统的使用
Apr 24 Javascript
vue 翻页组件vue-flip-page效果
Feb 05 Javascript
JavaScript常用工具函数大全
May 06 Javascript
JS使用setInterval计时器实现挑战10秒
Nov 08 Javascript
jQuery 实现扁平式小清新导航
Jul 07 #jQuery
vue@cli3项目模板怎么使用public目录下的静态文件
Jul 07 #Javascript
JS实现移动端可折叠导航菜单(现代都市风)
Jul 07 #Javascript
React+EggJs实现断点续传的示例代码
Jul 07 #Javascript
JS实现联想、自动补齐国家或地区名称的功能
Jul 07 #Javascript
jQuery 动态粒子效果示例代码
Jul 07 #jQuery
Electron实现应用打包、自动升级过程解析
Jul 07 #Javascript
You might like
php+ajax导入大数据时产生的问题处理
2014/06/11 PHP
php实现通过ftp上传文件
2015/06/19 PHP
php源码的安装方法和实例
2019/09/26 PHP
google地图的路线实现代码
2009/08/20 Javascript
jQuery '行 4954 错误: 不支持该属性或方法' 的问题解决方法
2011/01/19 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
JavaScript基于activexobject连接远程数据库SQL Server 2014的方法
2017/07/12 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
python中from module import * 的一个坑
2014/07/20 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
python编程实现12306的一个小爬虫实例
2017/12/27 Python
浅谈Python中的私有变量
2018/02/28 Python
Python cookbook(数据结构与算法)从序列中移除重复项且保持元素间顺序不变的方法
2018/03/13 Python
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
python实现控制台输出彩色字体
2020/04/05 Python
python从Oracle读取数据生成图表
2020/10/14 Python
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
模范家庭事迹材料
2014/02/10 职场文书
关爱老人标语
2014/06/21 职场文书
销售团队获奖感言
2014/08/14 职场文书
个人授权委托书格式
2014/08/30 职场文书
成绩单评语
2015/01/04 职场文书
社区六一儿童节活动总结
2015/02/11 职场文书
大学生团员个人总结
2015/02/14 职场文书
2015毕业生自我评价范文
2015/03/02 职场文书
社区党支部公开承诺书
2015/04/29 职场文书