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. （二）CRLF注入

    01 漏洞描述 在<HTTP | HTTP报文>一文中,我们介绍了HTTP报文的结构:状态行和首部中的每行以CRLF结束,首部与主体之间由一空行分隔.或者理解为首部最后一个字段有两个CRL ...

  2. 聊一聊高并发高可用那些事 - Kafka篇

    目录 为什么需要消息队列 1.异步 :一个下单流程,你需要扣积分,扣优惠卷,发短信等,有些耗时又不需要立即处理的事,可以丢到队列里异步处理. 2.削峰 :按平常的流量,服务器刚好可以正常负载.偶尔推出 ...

  3. centos7上安装memcached以及PHP安装memcached扩展（一）

    安装memecached 第一步:安装libevent # tar zvxf libevent-2.1.8-stable.tar.gz # cd libevent-2.1.8-stable # ./c ...

  4. 【实战】基于OpenCV的水表字符识别（OCR）

    目录 1. USB摄像头取图 2. 图像预处理:获取屏幕ROI 2.1. 分离提取屏幕区域 2.2. 计算屏幕区域的旋转角度 2.3. 裁剪屏幕区域 2.4. 旋转图像至正向视角 2.5. 提取文字图 ...

  5. AJAX的GET请求、POST请求

    感谢:链接(视频讲解很详细) AJAX(Asynchronous Javascript and XML):异步的JavaScript和XML(不需要刷新网页就可以更新网页数据) XML:百度百科 是一 ...

  6. ClientDataSet训练之1

    在做平面文件数据集时(ClientDataSet),需要引用单元,  uses Midaslib //D7,ClientDataSet选择文件(添加数据集) //为何D10.3.2不可右键添加数据集呢 ...

  7. Idea创建Scala的Maven项目

    Idea版本(2018.1.5) Scala版本(2.11.0) Java版本(1.8.0_151) 创建Scala的Maven项目 Idea新建项目如图,输入GroupId和ArtifactId之后 ...

  8. Docker镜像与容器的常用操作

    Docker镜像加速配置:Docker镜像常用操作:Dcoker容器常用操作. 镜像加速器 国内从 Docker Hub 拉取镜像有时会遇到困难,此时可以配置镜像加速器.国内很多云服务商都提供了国内加 ...

  9. cb06a_c++_顺序容器的定义

    /*cb06a_c++_顺序容器的定义顺序容器:vector,数组,尾端操作数据,快速随机访问list 链表,快速插入数据deque数组,双端-首尾操作数据,方便两端的数据访问 顺序容器适配器:sta ...

  10. 无法解析的外部符号 "public: virtual struct CRuntimeClass * _

    SetupPropertyPage.obj : error LNK2001: 无法解析的外部符号 "public: virtual struct CRuntimeClass * __this ...