html城市绘制,HTML5/Canvas二分法构建城市版图

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

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');