Javascript 需要帮助打印分形树吗

我需要一些使用JavaScript打印分形树的帮助

我已经编写了代码，根据为树定义的规则打印树序列，但是打印树时遇到了一些麻烦。谢谢你的帮助

代码如下：

var sentence = "F";
var rules = [];
rules[0] = {
    a: "F",
    b: "F[+F]F[-F]F"
}

setup();
function setup() {
    turtle();
    for (i = 0; i < 2; i++){
        generate();
    }
}

function turtle(){
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext('2d');
    for (var i = 0; i < sentence.length; i++){
        context.beginPath();
        var current = sentence.charAt(i);
        if (current == "F"){
            context.stroke();
            context.lineTo(50,50);
        }else if (current == "+"){
            context.rotate(20*Math.PI/180);
        }else if (current == "-"){
            context.rotate(-20*Math.PI/180);
        }else if (current == "["){
            context.save();
        }else if (current == "]"){
            context.restore();
        }
    }
}

function generate(){
    var nextSentence = "";
    for (var i = 0; i < sentence.length; i++){
        var current = sentence.charAt(i);
        var found = false;
        for (var j = 0; j < rules.length; j++ ){
            if (current == rules[j].a){
                found = true;
                nextSentence += rules[j].b;
                console.log(nextSentence);
                break;
            }
        }
        if (!found){
            nextSentence += current;
        }
    }
    sentence = nextSentence;
    turtle();
}

我能够打印树序列，但需要一些帮助来转换树序列，以便能够在画布上打印树。 输出应如下所示：

---

绘图逻辑存在一些问题。您的代码似乎假设save和restore也会保存坐标并将其还原，但事实并非如此。您没有正确使用“旋转”，因为它相对于原点旋转，所以您还需要进行平移。当您应该相对于当前位置执行此操作时，您正在执行绝对行到。而且走错了方向。以及其他问题

下面是我对您的代码进行的返工，使其运行到足以生成示例树的程度：

var sentence = "F";
var rules = [];

rules[0] = {
    a: "F",
    b: "F[+F]F[-F]F"
}

var x = 150;  // starting x
var y = 400;  // starting y
var y_stack = [];  // save & restore don't handle coordinates

function turtle(sentence, context) {

    for (var i = 0; i < sentence.length; i++) {

        var current = sentence.charAt(i);

        if (current == "F") {
            y -= 35;
            context.lineTo(x, y);
            context.stroke();
        } else if (current == "+") {
            context.translate(x, y);
            context.rotate(20 * Math.PI / 180);
            context.translate(-x, -y);
        } else if (current == "-") {
            context.translate(x, y);
            context.rotate(-20 * Math.PI / 180);
            context.translate(-x, -y);
        } else if (current == "[") {
            context.save();
            y_stack.push(y);
        } else if (current == "]") {
            context.restore();
            y = y_stack.pop();
            context.moveTo(x, y)
        }
    }
}

function generate(sentence) {
    var nextSentence = "";

    for (var i = 0; i < sentence.length; i++) {
        var current = sentence.charAt(i);
        var found = false;

        for (var j = 0; j < rules.length; j++ ) {
            if (current == rules[j].a) {
                found = true;
                nextSentence += rules[j].b;
                break;
            }
        }

        if (!found) {
            nextSentence += current;
        }
    }

    return nextSentence;
}

function draw() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext('2d');

    context.moveTo(x, y);

    for (i = 0; i < 2; i++) {
        sentence = generate(sentence);
    }

    console.log(sentence);
    turtle(sentence, context);

}

---

我没有看到任何问题。。。发生了什么事？你的预期结果是什么？如果我运行这个，我只会在控制台中看到一些字符串。@Jorg，我已经更新了我的答案，告诉我输出应该是什么样子的？如果我想在代码中应用其他规则，比如：var rulesB=[]；rulesB[0]={a:F，b:FF-[-F+F+F]+[+F-F-F]}var rulesC=[]；rulesC[0]={a:F，b:FF}rulesC[1]={a:X，b:F-[[X]+X]+F[+FX]-X}，那么我需要在代码中更改什么？