HTMl 5 Canvas Koch Fractcal

我今天要做的是帮助使用Koch算法，不断增加一行的迭代次数，而不必手动一次又一次地重新执行该过程。这就是我目前所掌握的。

KochStar.prototype.draw = function (context) {
    var StartPoint = new Vector(this.getStart().getX(), this.getStart().getY());
    var MiddlePoint = new Vector(this.getMiddle().getX(), this.getMiddle().getY());
    var EndPoint = new Vector(this.getEnd().getX(), this.getEnd().getY());

    //iteration 1, left side
    var v1 = MiddlePoint.copy();
    v1.subtract(StartPoint);
    v1.divide(3);
    var P1 = StartPoint.copy();
    P1.add(v1);

    var v1R = v1.copy();
    v1R.rotate(-Math.PI/3);
    var P2 = P1.copy();
    P2.add(v1R);
    var v1R2 = v1.copy();
    v1R2.rotate(Math.PI/3);
    var P3 = P2.copy();
    P3.add(v1R2);

目前正在做的是将一个向量分成三段，并将其中两段旋转60度，在一条简单的直线上创建一个三角形"凸起"。

因为我要问的是，每次调用起点和终点时，应用前面的数学方法自动创建曲线，并在"x"次迭代中继续这样做。

---------------更新------------------

好的，到目前为止，我所做的是，通过数组，做每一点。然而，我真正需要的是迭代部分。从A开始在A和B之间转到B这样做：A[C-D-E]B就是这样。

接下来我需要的是从数组中提取C-D，并将这两点作为我的起点和终点，在这两点之间做前面的数学运算。

    KochStar.prototype.draw = function (context) {
        var pArrayX = new Array(P1.getX(), P2.getX(), P3.getX());
        var pArrayY = new Array(P1.getY(), P2.getY(), P3.getY());
        var p1ArrayX = new Array(P1a.getX(), P2a.getX(), P3a.getX());
        var p1ArrayY = new Array(P1a.getY(), P2a.getX(), P3a.getY());
        var p2ArrayX = new Array(P1b.getX(), P2b.getX(), P3b.getX());
        var p2ArrayY = new Array(P1b.getY(), P2b.getX(), P3b.getY());
        var iterat;
        context.save()
        context.beginPath();
        context.lineWidth = "5";
        context.strokeStyle = "red";
        context.fillStyle = "Yellow";

    context.lineTo(StartPoint.getX(),StartPoint.getY());
              for (var i = 0; i < pArrayX.length; i++) {
                 var x = pArrayX[i];
                 var y = pArrayY[i];
                 context.lineTo(x, y); 
             }  
        context.lineTo(MiddlePoint.getX(),MiddlePoint.getY()); 
             for (var p = 0; p < p1ArrayX.length; p++) {
                var x1 = p1ArrayX[p];
                var y1 = p1ArrayY[p];
                context.lineTo(x1, y1); 
            }     
        context.lineTo(EndPoint.getX(),EndPoint.getY())
            for (var z = 0; z < p2ArrayX.length; z++) {
                var x2 = p2ArrayX[z];
                var y2 = p2ArrayY[z];
                context.lineTo(x2, y2); 
            } 
    context.lineTo(StartPoint.getX(),StartPoint.getY())

这是前面提到的，这就是我正在努力实现的！任何帮助都将是美妙的！

除了画这些点之外，你还需要这些点吗？如果你只需要绘制它，你可以让画布上下文在转换中为你做所有的数学运算。如果你需要点，让KochStar构造函数用一个函数来做所有的算术运算，该函数递归地将数组中的每一对连续点"Koch-ify"成一个由4个点组成的数组，并将它们连接起来。保留生成的数组，在draw中通过调用lineTo对其进行迭代。–sqykly