Question

我正在尝试重新编码，并认为在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();
}

Answer 1

它没有中断，只需要很长时间。请注意，为了绘制“另一侧的同一事物”，您需要在draw中复制onload调用。通过在draw调用中复制draw调用，您可以增加分形维数，绘制出非常不同的图形，并以指数方式增加绘制时间。

Answer 2

+1阿玛丹。如果您有兴趣了解如何使用P5js在Javascript中处理和实现分形树，则可以查看Daniel Shiffman's Coding Challenge。他在逐步完成工作方面做得很出色。

分形树递归问题

2 个答案: