javascript canvas生成分形图练习

最新推荐文章于 2024-04-09 00:47:46 发布

原创最新推荐文章于 2024-04-09 00:47:46 发布 · 1.9k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #canvas #迭代

JavaScript 专栏收录该内容

30 篇文章

订阅专栏

本文通过JavaScript和Canvas API实现分形图案的绘制，利用迭代生成类似二叉树的结构。通过调整参数如迭代次数、初始树枝长度和角度比例，可以创造出不同形态的分形效果，例如模拟出花椰菜的形状。

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

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

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

<!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);
    	//分支1
    	var 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)
    	//分支2
      	var 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>

上面的代码生成的图：