逐帧绘制毕达哥拉斯树

最新推荐文章于 2023-03-30 22:15:28 发布

天涯生聚

最新推荐文章于 2023-03-30 22:15:28 发布

阅读量660

点赞数

分类专栏： JavaScript随笔文章标签： javascript canvas 前端

本文链接：https://blog.csdn.net/qq_33297737/article/details/117017318

版权

JavaScript随笔专栏收录该内容

11 篇文章 0 订阅

订阅专栏

逐帧绘制毕达哥拉斯树

最近有点闲，于是就整点活，做了个逐帧绘制的毕达哥拉斯树。有利于你们理解递龟和异步的机制(￣▽￣)／.
绘制一半的毕达哥拉斯树
下面是代码:

<html>
    <body>
        <canvas id="canvas"></canvas>
        <script>
            var canvas = document.getElementById("canvas");
            var cavWidth = document.body.offsetWidth;
            var cavHeight = document.body.offsetHeight||800;
            canvas.setAttribute("width",cavWidth);
            canvas.setAttribute("height",cavHeight);
            var context = canvas.getContext("2d");
            drawImg(context);
            function sleep(time){
                return new Promise(function(rs,rj){
                    setTimeout(rs,time);
                });
            }
            async function drawImg(cont){//默认的背景
                cont.save();//入栈上下文
                cont.translate(800,500);//移动坐标系，也就是初始绘制位置
                async function creat_rect(w){
                    await sleep(1);
                    cont.fillStyle="RGB(230,"+(200+parseInt(Math.random()*56))+","+(55+w*2)+")";
                    cont.fillRect(0,0,w,w);
                    if(w<2){return 0;}//宽度小于2像素停止
                    //右边绘制
                    cont.save();
                    cont.rotate(37*2*Math.PI/360);
                    cont.translate(0,-w/5*3-w/5*4);
                    await creat_rect(w*4/5);
                    cont.restore();       
                    //左边绘制
                    cont.save();
                    cont.rotate(-53*2*Math.PI/360);
                    cont.translate(0,-w/5*3);
                    await creat_rect(w*3/5);
                    cont.restore();          		      
                }
                await creat_rect(100);
                console.log("done");//树绘制完成
                cont.restore();//弹出上下文，回到初始状态
                cont.clearRect(0,0,cavWidth,cavHeight);//清除区域内所有的东西，以便下次绘制
                drawImg(cont);
            }
        </script>
    </body>
</html>