使用canvas实现koch曲线

上一次实现koch曲线是大一时上的一门课————混沌趣谈。

koch曲线很简单,就是在一条线段的两个点之间添加三个点,让这个三个点构成一个等边三角形。
上次实现这个是在大一的时候,混沌趣谈课上要求用代码实现koch曲线。
那时的我从网上找了matlab代码,然后班助一行一行的给我解释实现过程。
一转眼我大三接近毕业,班助也毕业一年了。
HJL班助天下第一!

这次我是用js的canvas重新写了一个。
如下图演示:
这是个等边三角形
这是个六角星
所以当循环五次后,就会出现一个雪花。

好美的图案!
分型の艺术!
代码如下:

<html>
    <head>
        <style>
            #koch{
                left:0px;
                top:0px;
                position: relative;
                background-color:black;
                transition: background-color 3s linear;
            }
            /* #koch:hover{
                background-color:whitesmoke;
            } */

        </style>
    </head>
    <body>
        <canvas id = "koch" width = "1000px" height="1000px"></canvas>
        <script>
            /** @type {HTMLCanvasElement} */
            var c = document.getElementById("koch");
            var ctx = c.getContext("2d");
            ctx.strokeStyle = "#000000";
            ctx.fillStyle = "#ffffff";

            /**定义点的对象*/
            function point(x,y){
                var r = {};
                r.x = x;
                r.y = y;
                return r;
            }

            c.onmousedown = function(e){
                x1 = e.clientX-25;
                y1 = e.clientY+Math.sqrt(3)/3 * 25;
                Asnow(x1,y1);
            }

            /**生成初始点*/
            function Asnow(x1,y1){
                pointArray = new Array();
                //x1 = Math.ceil(Math.random()*1000);
                //y1 = Math.ceil(Math.random()*1000);
                var x2 = x1+50;
                var y2 = y1;
                var x3 = x1+25;
                var y3 = y1-25*Math.sqrt(3);
                var count = 0;
                pointArray[count++] = point(x1,y1);
                pointArray[count++] = point(x2,y2);
                pointArray[count++] = point(x3,y3);

                /**生成koch曲线的点存入对象数组*/
                for (let i = 0;i<5;i++){
                    let size = pointArray.length;
                    for (let j=0;j<pointArray.length-1;j=j+4){
                        split(pointArray[j],pointArray[j+1]);                    
                    }
                    split(pointArray[pointArray.length-1],pointArray[0]);
                }
                draw();
                pointArray.length = 0;
            }

            /**对数组进行point.x的排序*/
            function compare(property){
                return function(a,b){
                    var value1 = a.x;
                    var value2 = b.x;
                    //console.log(value1);
                    return value1 - value2;
                }
            }

            /**给两个点之间添加三个点*/
            function split(x1,x2){
                var x3 = (x2.x - x1.x) / 3 + x1.x;
                var y3 = (x2.y - x1.y) / 3 + x1.y;
                var x5 = (x2.x - x1.x) / 3 * 2 + x1.x;
                var y5 = (x2.y - x1.y) / 3 * 2 + x1.y;
                var x4 = x3 + ((x2.x - x1.x) - (x2.y - x1.y) * Math.sqrt(3)) / 6;
                var y4 = y3 + ((x2.x - x1.x) * Math.sqrt(3) + (x2.y - x1.y))  / 6;
                var index = pointArray.indexOf(x1);
                pointArray.splice(index+1,0,point(x3,y3),point(x4,y4),point(x5,y5));
            }

            function draw(){
                ctx.moveTo(x1,y1);
                for (let i=1;i<pointArray.length;i++){
                    ctx.lineTo(pointArray[i].x,pointArray[i].y);
                }
                ctx.lineTo(x1,y1);
                ctx.fill();
                //ctx.stroke();
            }

        </script>

    </body>
</html>

发表评论