H分形是由一个字母H演化出迷宫一样场景的分形图案，其构造过程是：取一个中心点（x,y），以此中心点绘制一条长为L的水平直线和两条长为H的竖直直线，构成一个字母“H”的形状；再以两条竖直直线的上下共4个端点为中心点，分别绘制一条长为L/2的水平直线和两条长为H/2的竖直直线；重复以上操作直至达到要求的层数，可以绘制出H分形图案，如图1所示。

图1  H分形图案的生成

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

<!DOCTYPE html>

<head>

<title>H分形</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');

ctx.strokeStyle = "red";

ctx.lineWidth = 3;

var maxdepth =4;

var curdepth = 0;

function drawH(x,y,length,hight)

{

curdepth++;

ctx.beginPath();

ctx.moveTo(x-length/2,y);

ctx.lineTo(x+length/2,y);

ctx.moveTo(x-length/2,y-hight/2);

ctx.lineTo(x-length/2,y+hight/2);

ctx.moveTo(x+length/2,y-hight/2);

ctx.lineTo(x+length/2,y+hight/2);

ctx.stroke();

if(curdepth <= maxdepth)

{

drawH(x-length/2,y-hight/2,length*0.5,hight*0.5);

drawH(x-length/2,y+hight/2,length*0.5,hight*0.5);

drawH(x+length/2,y-hight/2,length*0.5,hight*0.5);

drawH(x+length/2,y+hight/2,length*0.5,hight*0.5);

}

curdepth--;

}

drawH(250,250,240,180);

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出的H分形图案，如图2所示。

图2  递归深度maxdepth =4的H分形

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

<!DOCTYPE html>

<head>

<title>H分形</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');

ctx.strokeStyle = "red";

ctx.lineWidth = 3;

var maxdepth =0;

var curdepth = 0;

function drawH(x,y,length,hight)

{

curdepth++;

ctx.beginPath();

ctx.moveTo(x-length/2,y);

ctx.lineTo(x+length/2,y);

ctx.moveTo(x-length/2,y-hight/2);

ctx.lineTo(x-length/2,y+hight/2);

ctx.moveTo(x+length/2,y-hight/2);

ctx.lineTo(x+length/2,y+hight/2);

ctx.stroke();

if(curdepth <= maxdepth)

{

drawH(x-length/2,y-hight/2,length*0.5,hight*0.5);

drawH(x-length/2,y+hight/2,length*0.5,hight*0.5);

drawH(x+length/2,y-hight/2,length*0.5,hight*0.5);

drawH(x+length/2,y+hight/2,length*0.5,hight*0.5);

}

curdepth--;

}

function go()

{

ctx.clearRect(0,0,canvas.width,canvas.height);

drawH(250,250,240,180);

maxdepth++;

curdepth=0;

if (maxdepth>4)

{

maxdepth=0;

}

}

window.setInterval('go()', 1500);

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，在浏览器窗口中呈现出如图3所示的H分形动态生成效果。

图3  H分形图案动态生成

JavaScript图形实例：H分形的更多相关文章

  1. JavaScript图形实例：再谈IFS生成图形

    在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...

  2. JavaScript图形实例：线段构图

    在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...

  3. JavaScript图形实例：随机SierPinski三角形

    在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...

  4. JavaScript图形实例：迭代函数系统生成图形

    迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯 ...

  5. JavaScript图形实例：图形的旋转变换

    旋转变换:图形上的各点绕一固定点沿圆周路径作转动称为旋转变换.可用旋转角表示旋转量的大小. 旋转变换通常约定以逆时针方向为正方向.最简单的旋转变换是以坐标原点(0,0)为旋转中心,这时,平面上一点P( ...

  6. JavaScript图形实例：SierPinski三角形

    1．SierPinski三角形 Sierpinski三角形是一种分形,由波兰数学家谢尔宾斯基在1915年提出,它是一种典型的自相似集.其生成过程为: (1)取一个三角形(多数使用等边三角形): (2) ...

  7. JavaScript图形实例：Hilbert曲线

    德国数学家David Hilbert在1891年构造了一种曲线,首先把一个正方形等分成四个小正方形,依次从西北角的正方形中心出发往南到西南正方形中心,再往东到东南角的正方形中心,再往北到东北角正方形中 ...

  8. JavaScript图形实例：Canvas API

    1．Canvas概述 Canvas API(画布)用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap). 要使用HTML5在浏览器窗口中绘制 ...

  9. JavaScript图形实例：合成花卉图

    我们知道在直角坐标系中,圆的方程可描述为: X=R*COS(α) Y=R*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中将坐标点(X,Y)用线连起来,可绘制出一个圆.编写 ...

随机推荐

  1. 移除VS解决方案中的TFS版本控制

    项目每次会弹出提示 正在打开的解决方案已绑定到以下 Azure DevOps Server 上的源代码管理: xxxxx.是否要联系此服务器以尝试启用源代码管理集成? 移除VS解决方案中的TFS版本控 ...

  2. 用Java模拟游戏重力的实现（弹跳）

    年末开了Java实训大作业 想了好几天决定选择马里奥小游戏 发现即使做出来但是跳跃功能是很“笨拙”的,和我们玩的游戏不一样,没有跳跃速度的快慢什么的,后来才知道这个叫做游戏里面重力的模拟. 组队做系统 ...

  3. Python 中的类的继承

    class parent(object): def override1(self): print("Parent") class child(parent): def overri ...

  4. Github即将破百万的PDF：编写高质量代码改善JAVA程序的151个建议

    在通往"Java技术殿堂"的路上,本书将为你指点迷津!内容全部由Java编码的最佳 实践组成,从语法.程序设计和架构.工具和框架.编码风格和编程思想等五大方面,对 Java程序员遇 ...

  5. shutil模块的使用

    shutil模块 高级的文件,文件夹,压缩包处理模块 shutil.copyfileobj(fsrc,fdst,length) 将文件内容拷贝到另外一个文件中,可以部分.fdst目标length长度( ...

  6. Tensorflow从0到1(4)之神经网络

    一维数据集上的神经网络 # 1 引入包,创建会话 import tensorflow as tf import numpy as np sess = tf.Session() # 2 初始化数据 da ...

  7. 从JRaft来看Raft协议实现细节

    分布式系统和一致性问题 一致性问题(consensus problem)是分布式系统需要解决的一个核心问题.分布式系统一般是由多个地位相等的节点组成,各个节点之间的交互就好比几个人聚在一起讨论问题.让 ...

  8. 【JMeter_13】JMeter逻辑控制器__执行时间控制器<Runtime Controller>

    执行时间控制器<Runtime Controller> 业务逻辑: 根据输入的Runtime的值,对当前节点下的执行时长进行控制,当执行时长超过限定时长后,执行完当前正在执行的取样器后,跳 ...

  9. 【JMeter_05】创建第一个简单的接口脚本

    聚合数据:提供了很多开放的API,可以去练习使用https://www.juhe.cn/ 如果有小伙伴对HTTP协议不是很了解,可以看下这里 http://home.ustc.edu.cn/~xie1 ...

  10. C语言宏技巧 X宏

    前言 本文介绍下X宏的使用 首先简单介绍下宏的几种用法 #define STRCAT(X,Y) X##Y #define _STR(X) #@X #define STR(X) #X #define L ...