分形之koch曲线生成

概论：

自然界的分形，其自相似性并不是严格的，而是，在统计意义下的自相似性，海岸线也是其中一个例子。凡是满足统计自相似性的分形称之为无规分形。另外，还有所谓有规分形,这类分形, 由于它是按一定的数学法则呈现，因此具有严格的自相似性。所谓koch曲线，就是属于有规分形 

  

它的生成方法是把一条直线等分成三段，将中间一段用夹角为600的二条等长（1/3）的折线来代替，形成一个生成单元，如图1.5(b).然后再把每一条直线段用生成单元进行代替，经过无穷多次迭代后就呈现一条无穷多弯曲的koch曲线。用它来模拟自然界中的海岸线是相当理想的。

实现

生成效果：

JS源代码：

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

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        context.lineWidth = 2;
        context.strokeStyle = "#4c79c3";

        FT({x:200,y:300},{x:1300,y:300},Math.PI/3)
        function FT(po1,po2,angle) {  //注意！po1,po2,有方向，要按照一定的方向传参
            if(Math.abs(po1.x-po2.x)<5){ //设置中止函数
                return;
            }
            //核心算法,注意加上var,防止全局变量干扰，好习惯
            var x1=(2*po1.x+po2.x)/3;
            var y1=(2*po1.y+po2.y)/3;
            var x3=(2*po2.x+po1.x)/3;
            var y3=(2*po2.y+po1.y)/3;

            //按照坐标旋转公式求算x2,y2
            var x2=(x3-x1)*Math.cos(angle)-(y3-y1)*Math.sin(angle)+x1
            var y2=(x3-x1)*Math.sin(angle)+(y3-y1)*Math.cos(angle)+y1
            //核心算法
            draw([po1,{x:x1,y:y1},{x:x2,y:y2},{x:x3,y:y3},po2])
            FT(po1,{x:x1,y:y1},Math.PI/3)
            FT({x:x1,y:y1},{x:x2,y:y2},Math.PI/3)
            FT({x:x2,y:y2},{x:x3,y:y3},Math.PI/3)
            FT({x:x3,y:y3},po2,Math.PI/3)
        }
        function draw(points) {
            context.beginPath()   //加上这句重新绘制，接口文档是最好的资料！
            //擦去底部线条
            context.strokeStyle='#ffffff'
            context.lineTo(points[1].x,points[1].y)
            context.moveTo(points[1].x,points[1].y)
            context.lineTo(points[3].x,points[3].y)
            context.closePath()
            context.stroke()//擦除原来的底线
            context.strokeStyle = "#002fa7";
            context.beginPath()
            for(i=0;i<points.length;i++){
                context.lineTo(points[i].x,points[i].y);
                context.moveTo(points[i].x,points[i].y)
            }
            context.closePath()
            context.stroke()
        }
    })