首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现像雪花一样的Hexaflake分形

- Author -

aTeacher

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
js函数的延迟加载实现代码
Oct 11 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 Javascript
总结十个Angular.js由浅入深的面试问题
Aug 26 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
微信小程序如何连接Java后台
Aug 08 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 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
井字棋(1) 计算器(5) PyTorch(1) format(1) 图像处理(1) 底部导航(1) 人工智能(2) 五子棋(12) 对齐打印(1) 异步回调(1)
You might like
第五章 php数组操作
2011/12/30 PHP
PHP中使用gettext解决国际化问题的例子（i18n）
2014/06/13 PHP
ThinkPHP模板引擎之导入资源文件方法详解
2014/06/18 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
PHP数组与字符串互相转换实例
2020/05/05 PHP
学习ExtJS Window常用方法
2009/10/07 Javascript
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
2014/02/12 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
JQuery实现的图文自动轮播效果插件
2015/06/19 Javascript
小心！AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
vue框架中props的typescript用法详解
2020/02/17 Javascript
JS禁用右键、禁用Ctrl+u、禁用Ctrl+s、禁用F12的实现代码
2020/12/01 Javascript
python数据结构之图的实现方法
2015/07/08 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
VSCode下好用的Python插件及配置
2018/04/06 Python
Python图片转换成矩阵,矩阵数据转换成图片的实例
2018/07/02 Python
Python基于百度云文字识别API
2018/12/13 Python
对Python 语音识别框架详解
2018/12/24 Python
python调用c++传递数组的实例
2019/02/13 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
使用python实现对元素的长截图功能
2019/11/14 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
毕业自荐信
2013/12/16 职场文书
高中体育教学反思
2014/01/24 职场文书
护士试用期自我鉴定
2014/02/08 职场文书
2014年班务工作总结
2014/12/02 职场文书
委托书格式要求
2015/01/28 职场文书
人生遥控器观后感
2015/06/11 职场文书