javascript canvas生成分形图练习

最新推荐文章于 2021-12-03 23:00:33 发布

ccessl

最新推荐文章于 2021-12-03 23:00:33 发布

阅读量1.7k

点赞数

分类专栏： JavaScript 文章标签： javascript canvas 迭代

本文链接：https://blog.csdn.net/cc_fys/article/details/77622651

版权

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

摘要由CSDN通过智能技术生成

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

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

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

<!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