html5随机圆不重叠,随机不交叉重叠的圆圈

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

// RequestAnimationFrame shim.

window.requestAnimFrame = function() {

return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(e) {

window.setTimeout(e, 1000 / 60)

}

}();

var count = 20,

density = 5,

canvas = document.getElementById("canvas"),

ctx = canvas.getContext("2d"),

width = canvas.width,

height = canvas.height

radius = width / (count * (density * 2));

var getRandRange = function(min, max) {

return Math.random() * (max - min) + min;

}

var drawRect = function(width, height, x, y) {

ctx.beginPath();

ctx.lineWidth = 2;

ctx.strokeStyle = '#aaa';

ctx.strokeRect(width, height, x, y);

}

var drawCircle = function(x, y, radius) {

ctx.beginPath();

ctx.arc(x, y, radius, 0, 2 * Math.PI, false);

ctx.fillStyle = "#ffffff";

ctx.fill();

ctx.lineWidth = 1;

ctx.strokeStyle = '#aaaaaa';

ctx.stroke();

}

// Render function.

var render = function() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

var xCount = width / radius;

var yCount = height / radius;

var rectX, rectY, circX, circY;

for (var i = density; i < xCount; i += (density * 2)) {

for (var j = density; j < xCount; j += (density * 2)) {

rectX = (i - density) * radius;

rectY = (j - density) * radius;

circX = i * radius;

circY = j * radius;

circX = getRandRange(circX - radius * (density - 1), circX + radius * (density - 1));

circY = getRandRange(circY - radius * (density - 1), circY + radius * (density - 1));

//drawRect(rectX, rectY, radius * (density * 2), radius * (density * 2));

drawCircle(circX, circY, radius);

}

}

}

// Start loop.

function animloop() {

//requestAnimFrame(animloop);

render();

}

animloop();