HTML5/Canvas二分法构建城市版图

Binary cities

html5, 算法, 可视化

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1662
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var ctx = fullscreenCanvas().ctx;
var canvas = ctx.canvas;

function Rect(pos, width, height) {
    this.pos = pos;
    this.width = width;
    this.height = height;
}

Rect.prototype.update = Function.prototype;
Rect.prototype.draw = function() {
    function rect(pos, width, height, depth) {
        ctx.beginPath();
        ctx.moveTo(pos.x, pos.y);
        ctx.lineTo(pos.x + width, pos.y);
        ctx.lineTo(pos.x + width, pos.y + height);
        ctx.lineTo(pos.x, pos.y + height);
        ctx.closePath();
        ctx.stroke();

if (depth === 7) return;

var subdivisions = Choice.randint(2, 7);
        var horizontal = Choice.chance(50);
        if (depth === 7) {
            subdivisions = 10;
        }

for (let i = 0; i < subdivisions; i++) {
            setTimeout(function() {
                if (horizontal) {
                    rect(
                        Vector(pos.x,
                            pos.y + i * (height / subdivisions)),
                        width,
                        height / subdivisions,
                        depth + 1
                    );
                } else {
                    // vertical.. duh
                    rect(
                        Vector(pos.x + i * (width / subdivisions),
                            pos.y),
                        width / subdivisions,
                        height,
                        depth + 1
                    );
                }
            }, 15 * i);
        }
    }

rect(this.pos, this.width, this.height, 0);
}

ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);

var entities = createEntityPool();
var r1 = new Rect(Vector(0, 0), canvas.width, canvas.height);
entities.add('rects', r1);

entities.drawGroup('rects');

编译

CSS

HTML

Binary cities

html5, 算法, 可视化

编辑器支持Emmet

快捷键

Binary cities

html5, 算法, 可视化

HTML5/Canvas演示圆形构造原理的动画

HTML5/Canvas创建多层画布的梦幻泡沫动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：