经典三角形分形 - 随便玩玩

最新推荐文章于 2022-07-05 01:16:03 发布

daodfs1

最新推荐文章于 2022-07-05 01:16:03 发布

阅读量825

点赞数

分类专栏：前端文章标签：几何学前端 javascript

本文链接：https://blog.csdn.net/daodfs111/article/details/106607948

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<style>
    html,body {
        margin: 0;
        padding: 0;
    }
    #container {
        position: relative;
        width: 1000px;
        height: 650px;
        background-color: #000000;
    }

    #container div {
        position: absolute;
        width: 3px;
        height: 3px;
        background-color: #ffff00;
        border-radius: 50%;
    }
</style>

<body>
    <div id="container"></div>
</body>

<script>
    var container = document.getElementById('container');
    var div = document.createElement('div');
    var n = 0;
    var init = {x: 345, y: 128}; //黄点初始坐标
    var arr = [ // 三角形区域顶点坐标
        {x: 500, y: 0}, {x: 500, y: 0}, {x: 500, y: 0}, //上顶点
        {x: 130, y: 641}, {x: 130, y: 641}, //左下顶点
        {x: 870, y: 641} //右下顶点
    ];
    var calc = function () { //计算下一个黄点的坐标
        var rand = Math.random() * arr.length | 0;
        return {x: Math.round(init.x * 5 / 10 + arr[rand].x * 5 / 10), y: Math.round(init.y * 5 / 10 + arr[rand].y * 5 / 10)};
    };
    var drawOnce = function () {
        init = calc();
        var el = div.cloneNode();
        el.style.left = init.x + 'px';
        el.style.top = init.y + 'px';
        container.appendChild(el);
        n++;
        if (n < 5000) { //黄点的个数
            draw();
        }
    };
    var draw = function () {
        setTimeout(drawOnce, 0);
    };
    draw();
</script>

daodfs1

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
经典三角形分形 - 随便玩玩

<style> html,body { margin: 0; padding: 0; } #container { position: relative; width: 1000px; height: 650px; background-color: #000000; } #container div { position: absolute.
复制链接

扫一扫