javascript canvas生成分形图练习

简单的分形图，类似于二叉树

一颗数有两个对称分支，然后每个分支又可以继续生长。用一个数组记录每一层的信息，然后一层一层迭代，每迭代一次树枝就增加一层。

可以控制迭代次数，初始树枝长度，长度比例等。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"/>
</head>
<body>
<canvas id="myc" width="1000" height="1000" style="border:1px solid black"></canvas>
<script>
//x,y是初始点
//length初始树枝长度
//ratio 树枝长度与比例
//n 迭代次数
var n=0;
function drawTree(ctx,x,y,length,ratio)
{var cross={};var value=[];cross.x=x;cross.y=y-length;cross.arc=Math.PI/2;value.push(cross);growBranch(ctx,value,length*ratio,ratio);}
function growBranch(ctx,value,bralen,ratio)
{   n=n+1;if(n==10)return;var value1=[];value.forEach(function(item,index){var arc1=item.arc+(Math.PI*4)/(3*2);var arc2=item.arc-(Math.PI*4)/(3*2);//分支1var bx=Math.cos(arc1)*bralen;var by=Math.sin(arc1)*bralen;ctx.moveTo(item.x,item.y);ctx.lineTo(item.x+bx,item.y+by);var cross={};cross.x=item.x+bx;cross.y=item.y+by;cross.arc=arc1;value1.push(cross)//分支2var bx1=Math.cos(arc2)*bralen;var by1=Math.sin(arc2)*bralen;ctx.moveTo(item.x,item.y);ctx.lineTo(item.x+bx1,item.y+by1);  var cross1={};cross1.x=item.x+bx1;cross1.y=item.y+by1;cross1.arc=arc2;value1.push(cross1);});ctx.stroke();growBranch(ctx,value1,bralen*ratio,ratio);}
var canvas=document.getElementById('myc');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#000';
ctx.fillRect(0,0,1000,1000);
//ctx.strokeStyle='rgb(46,139,87)';
ctx.strokeStyle='#fff';
drawTree(ctx,500,500,200,0.7);
ctx.stroke();
</script>
</body>
</html>

上面的代码生成的图：

现在尝试改一些参数

var arc1=item.arc+(Math.PI)/(3*2);
ar arc2=item.arc-(Math.PI)/(3*2);

生成的下面图：

现在尝试改一些参数，将角度改小一点

var arc1=item.arc+(Math.PI)/(3*3);
ar arc2=item.arc-(Math.PI)/(3*3);

生成了一颗花椰菜

将角度改大，改变迭代次数

javascript canvas生成分形图练习相关推荐

使用 Python3 生成分形图，在编程中领略分形几何之美
大家好!欢迎来到我们第二期的代码滤镜.不关心实现细节,每天一个炫酷好玩儿的项目演示,激发编程兴趣,扩展技术视野. 今日实验主题是: 用 Python3 生成分形图片 (鹅厂微信端把视频压缩成
微信小程序 —— canvas生成海报图与分享
整体思路获取手机屏幕大小去依据设计尺寸比例调整 -wx.getSystemInfo 网络图片.base64图片保存到到本地临时文件路径 canvas绘制图片 - wx.createCanvasCon ...
html在线印章,纯前端Html+JavaScript+canvas生成公章
公章 function createSealEx(){ var dw = document.getElementById("dw"); var mdtext = document. ...
python绘制分形图基础_python绘制分形图
用Delphi 实现分形图形的绘制 [日期:2006-05-27] 来源: 作者... 基于 VB 的分形图形绘制尹舸;胡小芳;许华忠 [期刊名称]<网络新媒体技术> [年(卷),期]2 ...
分形图的递归算法简介
分形图的递归算法 - 在计算机程序设计中,递归是指一个过程直接或间接得调用其自身的一种算法. - 直接递归调用的例子如下: void Recur(n){````Recur(m);```` } 过程Re ...
如何用 canvas 画出分形图
前言分形是一门以非规则几何形态为研究对象的几何学,由曼德勃罗(B.B.Mandelbrot)等人创立并命名. 分形图从整体上看,是处处不规律的.但从局部观察,图形的规则性又是相同的,即具有自相似的 ...
使用 Canvas 生成公众号头图
熟悉"前端晚自修"的朋友们应该知道,我们每期的头图除了上面的文字随着每期变动以外,几乎是一模一样的(因为太懒了~).这个头图虽然丑了一点,但是也还说的过去,毕竟是我倾尽毕生艺术细胞 ...
小程序canvas生成海报字体在背景图下方
小程序canvas生成海报字体在背景图下方图片是异步加载可以放在回调里设置字体也可以延迟放置如果还有更好的方法可以留言
js 通过canvas生成带二维码的海报图
前言 h5移动端生成海报图,可长按图片保存或发送给朋友,或长按识别二维码.两种场景:第一种是生成项目分享海报图,通过背景图和地址生成的二维码合成一张海报图:第二种是通过页面生成商品海报图,页面有产品介 ...

javascript canvas生成分形图练习

javascript canvas生成分形图练习相关推荐

最新文章

热门文章