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制作迷你背词汇工具
Jul 27 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
May 08 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
JavaScript 闭包机制详解及实例代码
Oct 10 Javascript
seajs模块之间依赖的加载以及模块的执行
Oct 21 Javascript
JS实现运动缓冲效果的封装函数示例
Feb 18 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
微信小程序遍历Echarts图表实现多个饼图
Apr 25 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
npm全局环境变量配置详解
Dec 15 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嵌套输出缓冲代码实例
2015/05/12 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
PHP实现的策略模式示例
2019/03/20 PHP
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
使用jquery实现仿百度自动补全特效
2015/07/23 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
2016/10/30 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
vue-cli2 构建速度优化的实现方法
2019/01/08 Javascript
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
微信小程序云开发(数据库)详解
2019/05/17 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
vuex根据不同的用户权限展示不同的路由列表功能
2019/09/20 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
2020/03/10 Javascript
基于NodeJS开发钉钉回调接口实现AES-CBC加解密
2020/08/20 NodeJs
[00:32]2018DOTA2亚洲邀请赛VG出场
2018/04/03 DOTA
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python中安装Scrapy模块依赖包汇总
2017/07/02 Python
Python制作词云的方法
2018/01/03 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
JAVA程序员面试题
2012/10/03 面试题
Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型
2013/10/30 面试题
大学毕业生个人自荐书
2014/07/02 职场文书
自查自纠工作总结
2014/10/15 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
员工辞职信范文
2015/03/02 职场文书
面试通知短信
2015/04/20 职场文书
夫妻吵架保证书
2015/05/08 职场文书
学术会议开幕词
2016/03/03 职场文书
python 单机五子棋对战游戏
2022/04/28 Python