我正在尝试重新开始编码，并认为用js编写一个快速的小分形树会有所帮助，但我显然做错了什么。下面是我的代码，下面是我发现的一个非常相似的代码，基本上使用相同的逻辑。我的代码一直在工作，直到我添加了带有负角度的第二次 draw (( 调用，以便树也生长在左侧。我很想知道为什么第二个调用会破坏递归。
提前谢谢你
我的代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>fractal tree</title>
<style>
#myCanvas{
border:1px solid black;
}
</style>
<script>
var x =0;
var y =0;
var startx;
var starty;
var length;
var pi = Math.PI;
var ang = pi/4;
var ctx;
var canvas;
window.onload = function setup(){
canvas = document.getElementById("myCanvas");
startx = canvas.width/2;
starty = canvas.height;
length = 300;
ctx = canvas.getContext("2d");
ctx.translate(startx,starty);
draw(ctx,startx,starty,length,ang);
}
function draw(ctx,x,y,length,angle) {
if(length < 1){
return;
}
ctx.moveTo(0,0);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.translate(0,-length);
ctx.rotate(angle);
draw(ctx,x,y,length*.67,angle);
draw(ctx,x,y,length*.67,-angle);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="800px" height="600px">
</canvas>
</body>
</html>
我找到的其他代码(确实有效(
function draw(startX, startY, len, angle) {
ctx.beginPath();
ctx.save();
ctx.translate(startX, startY);
ctx.rotate(angle * Math.PI/180);
ctx.moveTo(0, 0);
ctx.lineTo(0, -len);
ctx.stroke();
if(len < 10) {
ctx.restore();
return;
}
draw(0, -len, len*0.8, -15);
draw(0, -len, len*0.8, 15);
ctx.restore();
}
它没有中断，只是需要很长时间。请注意，为了在另一端绘制"相同的东西"，您需要在onload中复制draw调用。通过在draw调用中复制draw调用，您增加了分形维数，制作了非常不同的绘图类型，并成倍地增加了绘制时间。
+1 Amadan。如果你有兴趣看看分形树是如何在Javascript中使用P5js接近和实现的，你可以看看Daniel Shiffman的编码挑战。他做得很好，一步一步地走过他是如何做到的。