小练手：用Canvas绘制谢尔宾斯基三角形

补充

作者第二种画法的完整程序：

PS：修改function SierpinskiTriangle(p,len,depth = 9)中depth的赋值0~9，观察效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sierpinski Triangle</title>
</head>
<body>
    <canvas id="canvas" 
    width="600" height="600" 
    style="display:block;margin:50px auto">
        你的浏览器不支持canvas
    </canvas>
</body>
<script type="text/javascript">
    var context = 
	document.getElementById("canvas")
	.getContext("2d");
    
    //根据三顶点坐标绘制一个三角形
    function triangle(p1,p2,p3){
        context.moveTo(p1.x,p1.y);
        context.lineTo(p2.x,p2.y);
        context.lineTo(p3.x,p3.y);
        context.lineTo(p1.x,p1.y);
    }
    
    /*绘制谢尔宾斯基三角形的方法
      p：正三角形中心点坐标，len：三角形边长，depth：递归深度*/
    function SierpinskiTriangle(p,len,depth = 9){
        var r=len/Math.sqrt(3);
        //记录当前端点，默认为左下角顶点坐标
        var currentPoint={x:p.x-len/2, y:p.y+r/2};
        //记录当前方向角
        var currentAngle=0;

        //旋转方法，将下次画线的方向逆时针旋转
        function turn(angle){
            currentAngle+=angle;
        }
        //画线方法，根据当前端点和画线方向绘制
        function draw_line(length){
            var angle=currentAngle/180*Math.PI;
            currentPoint.x+=length*Math.cos(angle);
            currentPoint.y-=length*Math.sin(angle);
            context.lineTo(currentPoint.x,currentPoint.y);
        }

        //开始画折线，如果深度是偶数便可直接绘制折线，否则需要以斜60度为初始方向
        context.moveTo(currentPoint.x,currentPoint.y);
        if (depth%2==0){
            curve(depth,len,-60);
        }else{
            turn(60);
            curve(depth,len,-60);
        }

        function curve(order,length,angle)
        {
            if (order==0){
                draw_line(length);
            }else{
                //递归画三段折线
                curve(order-1,length/2,-angle);
                turn(angle);
                curve(order-1,length/2,angle);
                turn(angle);
                curve(order-1,length/2,-angle);
            }
        }
    }

    //绘制
    SierpinskiTriangle({x:300,y:360},560);
    context.lineWidth = 0.5;
    context.strokeStyle = "#F5270B";
    context.stroke();
</script>
</html>

wdhuag-2

发布了32 篇原创文章 · 获赞 9 · 访问量 7万+

私信关注

小练手：用Canvas绘制谢尔宾斯基三角形

猜你喜欢