分形之树模型

生成效果：

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 = "#1230ff";

        FT({x:300,y:800},{x:300,y:650},31*Math.PI/36,23*Math.PI/18)
        FT({x:700,y:800},{x:700,y:500},31*Math.PI/36,23*Math.PI/18)
        function FT(po1,po2,angle1,angle2) {  //注意！po1,po2,有方向，要按照一定的方向传参
            if(Math.abs(po1.y-po2.y)<5){ //设置中止函数
                return;
            }
            //核心算法,注意加上var,防止全局变量干扰，好习惯
            var x0=(2*po1.x+po2.x)/3;
            var y0=(2*po1.y+po2.y)/3;

            //按照坐标旋转公式求算x2,y2
            var x1=(x0-po2.x)*Math.cos(angle1)-(y0-po2.y)*Math.sin(angle1)+po2.x;
            var y1=(x0-po2.x)*Math.sin(angle1)+(y0-po2.y)*Math.cos(angle1)+po2.y;
            var x2=(x0-po2.x)*Math.cos(angle2)-(y0-po2.y)*Math.sin(angle2)+po2.x;
            var y2=(x0-po2.x)*Math.sin(angle2)+(y0-po2.y)*Math.cos(angle2)+po2.y;
            //核心算法
            draw([po1,po2,{x:x1,y:y1},{x:x2,y:y2}]);
            FT(po2,{x:x1,y:y1},31*Math.PI/36,23*Math.PI/18)
            FT(po2,{x:x2,y:y2},31*Math.PI/36,23*Math.PI/18)
        }
        function draw(points) {
            context.beginPath()   //加上这句重新绘制，接口文档是最好的资料！
            num=points.length;
            for(i=0;i<num-1;i++){
                context.lineTo(points[i].x,points[i].y);
                context.moveTo(points[i].x,points[i].y)
            }
            context.moveTo(points[num-3].x,points[num-3].y);
            context.lineTo(points[num-1].x,points[num-1].y);
            context.closePath()
            context.stroke()
        }
    })