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

转载《小练手:用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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值